html - How do I make my navigation bar remain on top of page while scrolling? -


here html code

<div id="header" class="grid_12"> <h6>dchost - brought <a href="http://www.dt.co.uk" target="_blank"> dataconnectivity.co.uk </a></h6>             <ul>                 <li>home</li>                 <li>hosting</li>                 <li>domain names</li>                 <li>lates news</li>                 <li>about us</li>                 <li>contact us</li>             </ul>         </div> <!-- ends header grid 12 --> 

css

#header { color: #848484; height: 70px; width: 100%; font-size: small; font-style: oblique; text-align: center; background: #333333;}  #header h6 { max-height: 3px; font-size: 10px; text-align:left; }  #header li { font-weight: 800; color: #ffffff; font-style: normal; display: inline} 

i nav bar remain fixed on top of page. however, every time change position fixed, bar disappears. have no idea why doing this? in advance help!

you need position header top: 0; , set z-index higher other elements.

#header {     position: fixed;     top: 0;     z-index: 999; } 

this add compatibility between browsers.

demo


Comments

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -