Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make my css menu stay on top of the screen?

Tags:

html

css

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

like image 254
Jacob Anthony Tonna Avatar asked Jun 04 '13 04:06

Jacob Anthony Tonna


People also ask

How do I make my navigation bar not move?

Change it to: position: absolute; and the navbar will stay wherever you position it and won't move, even when scrolling.

How do I keep the navbar at the top of my screen?

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.

How do you make a floating menu bar in CSS?

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.

How do I make the top menu stay CSS?

To create a fixed top menu, use position:fixed and top:0 .


2 Answers

Just a thought, don't you need to add z-index: 1000; so that it floats over all the items on the page?

like image 110
TLCJohn Avatar answered Sep 21 '22 19:09

TLCJohn


Add the following to your menu css:

#cssmenu {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

That's basically how they do it.

like image 45
An Phan Avatar answered Sep 19 '22 19:09

An Phan