css - Stop header/nav bar from scrolling -
ok have header/nav bar scrolls up/down each page. how fix top of page no longer scrolls , content scrolls behind it? checked out many examples old , dont seem work. want entire header incl. nav bar remain in fixed position!
appreciate help. damien
<header> <div class="nav-responsive"><div>menu</div> <select onchange="location=this.value"> <option></option> <option value="index.html">home</option> <option value="about.html">about</option> <option value="services.html">services</option> <option value="products.html">products</option> <option value="contacts.html">contacts</option> </select> </div> <div> <div> <h1><a href="index.html"><img src="images/jungledesign.png" alt=""></a></h1> <nav> <ul class="menu"> <li class="current"><a href="index.html">home</a></li> <li><a href="about.html">about</a></li> <li><a href="services.html">services</a></li> <li><a href="products.html">products</a></li> <li><a href="contacts.html">contacts</a></li> </ul> </nav> <div class="clear"></div> </div> </div> </header>
use fixed position
header{ position: fixed; top: 0; width: 100%; } and following after header element can manage top spacing padding-top: {{header-height}}
Comments
Post a Comment