Estoy realizando una app web. Intento hacer una barra de navegación pero esta no es fija. Este es su código:
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row" id="green-bar">
<div class="container">
<div class="navbar-header page-scroll">
<a href="http://www.utpuebla.edu.mx/" >
<div class="col-md-2" id="img-iso">
<img src="../images/general/logo2.png" class="img-responsive" style="margin-top: 10px">
</div>
<div class="col-md-10" >
<h2>Universidad Tecnológica de Puebla</h2>
<h4>Educación para el progreso social</h4>
</div>
</a>
</div>
</div>
</div><!-- cierra green-bar -->
<div class="row">
<div class="container">
<div class="col-md-12">
<ul class = "nav nav-tabs" >
<li role= "presentation" class= "active" ><a href= "#" > Home </a></li>
<li role= "presentation" ><a href= "../index.jsp" > Profile </a></li>
<li role= "presentation" ><a href= "../newhtml.html" > Messages </a></li>
</ul>
</div>
</div>
</div><!-- cierrra row -->
</nav><!-- cierra navbar navbar-default navbar-fixed-top -->
</div><!-- cierra container fluid -->
Como no es fija, cuando intento agregar más contenido a la página la barra de navegación evita que este se visualice ya que se pone por encima. ¿Alguna idea de cómo solucionarlo? Intenté poner un margin-bottom pero cuando lo pruebo en otros dispositivos se mueve todo.
sticky navbar
, consulta en google como resolverlo, si estás usando bootstrap puedes revisar la documentación, en foundation antes funcionaba con la clasesticky
, pero ahora se tiraron eso :'(