I am trying to create an off-canvas menu with foundation 6 like it's done in the official site.
When it comes to the mobile menu bar, I'd like to make it sticky to the bottom of the screen.
.title-bar {
position: fixed;
width: 100%;
bottom: 0;
}
But as soon as I click the mobile menu, the menu bar jumps away as if it was absolute instead of fixed.
Anyone had this problem and solved it yet?
There are a few changes to be made.
The <div class="content"> should be mentioned inside the <div class="off-canvas-content">. Off-canvas is designed to work with contents written inside its off-canvas-content class.
The <div class="off-canvas-content"> should be pushed to use the complete vertical height. You can mention, height:100vh; although, beware of the browser compatibility.
The <div class="off-canvas position-left"> gets another class is-open added to it, whenever the menu icon is toggled. Like point 2, this should also be pushed to use the entire vertical height.
Here is a working example for your reference.
Note:
If you feel the transition is a bit odd, install motion-ui and apply some transition.
Related
I Made a custom button and wish to use it as navbar toggle, and make the button stay on the right top of the screen on all time and being mobile responsive, all solution i found make the button position:fixed. but this is not mobile responsive, i tried pull-right class but it only works when i am on the top of the screen and not fixed. as long i apply the position fixed it goes to the left side of the screen, use left or right won't work if i want it mobile responsive. anyway to solve this?
As the others said:
top: 0;
right: 0;
..should work fine. Also it's a good idea to link a fiddle. If you want it to keep it mobile resposive, just include it in the bootstrap grid.
Made this fiddle
try to apply below css
.customButton{
top : 0;
right : 0;
position: fixed;
}
Just Try and fail and solved it.
Simply wrap it with div element or other element, and apply the div float right and some little padding i got my button set.
<div style='float:right;'>
<button style='position:fixed;'></button>
</div>
There you go
<input type="button" style="position:fixed; top:0px; right:0px;" />
For navbars Bootstraps provides special classes if you want the navbar to be fixed. Use ".navbar-fixed-top" from https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top
The floating can be done with the ".pull-right" as you said, or with ".navbar-left". Also you need to pay attention to what you put in ".collapsed" area.
Sometimes you might need to duplicate some links for both mobile and desktop views. You can also use the responsive classes, like ".hidden-xs", etc. see https://getbootstrap.com/docs/3.3/css/#responsive-utilities
I have 0 knowledge about css so this might be very simple for you folks. I am trying to change ionic side menu animation from slide in to slide over. Basically, when user clicks on the side menu, content should not move and side menu should be on top of it. Reason I am trying to achieve this is because i have a cordova google map plugin which will not move when side menu pushes the content and there it looks really ugly.
Any suggestion/solution
I suggest to made your own menu.
Basically you make a div with an absolute position and toggle it.
I made a simple jsfiddle so you can try this. jsfiddle
.mySide{position: absolute; left: 0; width: 40%; z-index: 100;}
Hope it helps.
Only on chrome, the left sidebar menu disappears on hover. This does not happen at the top of the page but can be seen when scrolled midway of the page.
IMAGE SHOWING THE ISSUE --> https://symu.co/rdrbyt
Code:
.uk-notouch .tm-sidebar-togglebar .tm-sidebar:before {
content: "";
position: fixed;
}
.uk-notouch .tm-sidebar-togglebar .uk-open-menu:before {
content: "";
position: fixed;
width: 210px;
height: 100%;
}
DEMO SITE: http://healthsphere.starazure.com/ --> Please scroll down midway to the page and hover the left menubar to see the issue.
Thanks for your help
I figured out myself and was tired of people positing unrelated replies to make a fiddle out of a Joomla php based page with fontawesome icons, bootstrap, jquery and more and even better my css gets created by less. It was really a complicated 3 level menu system and people just said fiddle it without even looking at the example and screenshot. It could be possible to create a fiddle but would take a whole day for me ( I am not an expert, if so I would not ask the question here in the first place)
If you dont want to answer, that is perfectly fine and understandable but dont just say - This is no good without a fiddle when a demo and screenshot has been posted. Just move on - Be nice - everyone is fighting a hard battle here.
For anyone who is trying to make a 3 level menu, here is the answer.
The idea is to remove overflow property because that in conjunction with fixed position breaks in Chrome. Its a well known bug and has been reported. With overflow hidden removed, the next steps is to push the menu list items to the left. This makes the menu disappear but then used margin to push the icons only to the right. In short, move menu items to left so they are hidden and move icon only to the right. Remove overflow declarations in css as it breaks chrome.
.tm-sidebar .uk-navbar-nav li {margin-left: -175px;}
.tm-sidebar .uk-navbar-nav li a i {margin-left: 175px;}
How do I produce a footer that spans the whole width of the screen (despite screen resolution) and stays at the bottom of the page?
When I search for this I get people providing code for sticky footers (footers that hoover with the page), and saying use absolute positioning (which I hear is a no no).
A perfect example of what I mean is the one of the sites twitter bootstrap cites as an example (https://www.gathercontent.com/). On that site the footer (which looks like a hero unit or something) is always on the bottom of the page.
If you are using bootstrap, this example shows how you can do it. The name is misleading on the site, but it stays at the bottom of the page if there isn't much content. It also moves down the page if there is a lot of content (so doesn't stick).
The footer:
http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/
The CSS:
http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/sticky-footer-navbar.css
Make sure not to forget the
html {
position: relative;
min-height: 100%;
}
Use this jquery:
$(window).load(function () {
$('.footer').width($(window).width());
$(window).resize(function () {
$('.footer').width($(window).width());
});
});
Make sure you have a js file though
I was looking for something similar as I did not want the footer to hover. The footer was blocking the pull down menu elements on small mobile devices. All I did was to remove "navbar-fixed-bottom" from the footer class.
I changed
<div class = "footer navbar-fixed-bottom"></div>
to
<div class = "footer"></div>
I added two divs to hold background images for decorative purposes - as requested by the artist whom is working with me on a website.
At first, it worked very well. The images were supposed to show on each side of the wrapper div holding the website content - without affecting page width.
Then the organization owning the website got another sponsor, who's logo I had to add to a column on the right. I created a new id for the 5th "button" and created a div for it. Uploading it, I noticed that a scroll bar had suddenly appeared on the bottom of the page, for no apparent reason.
I first suspected the button to be the problem, but eventually found out that the right-most decorative div was bending the page width, despite using absolute positioning. Both of the divs use the same code, only mirrored for left and right. I have no idea what is causing the problem..
(You can see the problem in action while it lasts at www.torucon.no/no/)
Please help me out! Here is the CSS for both of the divs:
#wolf
{
position:absolute;
min-height:500px;
min-width:498px;
left:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/wolf.png');
z-index:-1;
}
#lion
{
position:absolute;
min-height:500px;
min-width:498px;
right:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/lion.png');
z-index:-1;
}
Here is an HTML snippet showing the HTML of the divs:
<div class="wrapper"> <!-- Contains the entire website for structure -->
<div id="wolf">
</div>
<div id="lion">
</div>
((In case you didn't get it: The wrapper div is supposed to be centered, and it is. But when I resize my window, I find that a scroll bar appears long before the wrapper content is even close to the browser window borders. That would be annoying on computers with low resolution or small screens!))
I think what you want is to have the lion and wolf progressively appearing as the user widens the browser viewport, but otherwise partially hidden off to the sides of the wrapper. Correct?
I think you're only safe option to achieve this without triggering the scrollbars you don't like are to combine the images into one and attach them as the background image on the body element of the page.
I believe you're right about using overflow-hidden on the body -- you'd loose the ability to scroll to see overflowed content if the viewport is resized down below the wrapper's width.
I have checked that you posted link http://www.torucon.no/no/ but i coudnt see bottom scroll bar ,
Anyway , Why you cant set background?
<body>
<div class="overlay">
<div class="wrapper">
</div>
</div>
</body>
<style>
body{width:100%; background:---;}
.overlay{width:100%; background:---;}
<style>