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

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -