1

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.

4
  • Tiene que quedar pegada a la parte superior de la ventana?
    – SalahAdDin
    Commented el 6 jul. 2016 a las 21:34
  • mm bueno mi objetivo es una barra estilo facebook que se mueve conforme bajas la pagina, eso intento conseguir o como ? no te entiendo jeje Commented el 6 jul. 2016 a las 21:42
  • Eso se llama sticky navbar, consulta en google como resolverlo, si estás usando bootstrap puedes revisar la documentación, en foundation antes funcionaba con la clase sticky, pero ahora se tiraron eso :'(
    – SalahAdDin
    Commented el 6 jul. 2016 a las 21:47
  • En el código que has puesto no se ve el problema ¿Puedes poner todo el código necesario para reproducir el error?
    – user7176
    Commented el 8 jul. 2016 a las 10:56

1 respuesta 1

2

Prueba a añadirle un padding-top al body.

body {
  padding-top: 70px;
}

He puesto 70px, pero debes poner un poco mas de la altura que tenga tu navbar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.