lunes, abril 18, 2016

Header fijo con bootstrap

Si quieres hacer un header fijo en el top de tu página y estás utilizando bootstrap es muy sencillo conseguirlo.

En la clase del  header debes añadir "navbar-fixed-top" quedando así:


<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul>
  </div>
</nav>

Ten en cuenta que en el css debes añadir un padding con el tamaño del header,
si no se solapará con tu página

En este caso el alto de mi header es 54px y el CSS quedaría así:



body { padding-top: 54px; }


Podéis encontrar más información aquí:

http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

No hay comentarios: