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.
Comments
Post a Comment