CODEWITHSUNDEEP
htmlcss
Jacob Anthony Tonna
Jacob Anthony Tonna

Reputation: 525

Make my css menu stay on top of the screen?

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

Upvotes: 15

Views: 92172

Answers (6)

TLCJohn
TLCJohn

Reputation: 93

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

Upvotes: 4

An Phan
An Phan

Reputation: 2568

Add the following to your menu css:

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

That's basically how they do it.

Upvotes: 39

SadhanaP
SadhanaP

Reputation: 37

Just these 3 would do..

position: fixed;
top: 0;
width: auto;

Upvotes: 0

Selvamani
Selvamani

Reputation: 7684

Use this css for set your nav bar fixed on top. 

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

Here the demo: http://jsfiddle.net/SkuhZ/

Upvotes: 1

Janak
Janak

Reputation: 5052

It can be done if you use : 

 position:fixed;

Upvotes: 3

ShibinRagh
ShibinRagh

Reputation: 6646

Add fixed property 

 #cssmenu {
          position:fixed;
 }

Upvotes: 5

Related Questions