like in http://facebook.com they have a nav bar type thing that stays at the top of the page how can i do that with my code. i have my css advanced menu working except for that one problem. well here is my link to my jsfiddle
Js fiddle
Main Parts of css
#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu { height: 42px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);}
now if im not mistaken this has to be done with this part if not check the JsFiddle
Change it to: position: absolute; and the navbar will stay wherever you position it and won't move, even when scrolling.
Select the Navbar. Open Style panel > Position. Choose sticky from the position dropdown. Set a top value of 0 pixels to keep the navbar fixed to the top on scroll.
Floating Menu PositionUse the top , bottom , left , and/or right to position the menu exactly where you want it on the page. Regardless of where the menu is located within the source code, it will appear exactly as you specify it in the source code. Here, we fix the menu to the bottom right of the page.
To create a fixed top menu, use position:fixed and top:0 .
Just a thought, don't you need to add z-index: 1000;
so that it floats over all the items on the page?
Add the following to your menu css:
#cssmenu {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
That's basically how they do it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With