4

Estoy desarrollando una plantilla básica que incluye un menu fijo (sticky).

Logré que el logo de la izquierda y los iconos de la derecha sean fijos, pero aún así, falta un fondo a ese menu para que no se diferencie con el contenido de la web del body.

Imagen de como está ahora:

Trabajo realizado

Y este sería el problema que se presenta cuando se navega con ese menu:

Problema porque no hay fondo fijo

Si logran apreciar, no hay fondo en el menu.

Acabo de subir los ficheros ya que son muchos para mostrarlos acá https://mega.nz/#!Fp5kTQhR!Bmvts-ghpsfQLnt7zvhuE6bAXeA78IAQP677_5xrayE

Pero aún así este sería un trozo de código del menú:

  <header>
          <nav id="tf-menu" class="navbar navbar-default menu"> 
              <div class="container menus"> 

                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand logo logo_1" href="index.html">
                      <img src="img/logo.jpg" style="height:110px; margin-left:50%;" class="hidden-xs hidden-sm"/>
                      <img src="img/logo-s.jpg" style="height:75px"class="visible-xs visible-sm"/>
                    </a>
                  </div>

                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <br class="visible-xs"/><br class="visible-xs"/>
                    <ul class="nav navbar-nav navbar-right menus_der">

                        <li><a href="router.html" v-if="personaLogueada">Mi Perfil</a></li>
                        <li><a href="routerf6f2.html?page=blog" class="btn btn-xs btn-warning btn-circle"><span class="fa fa-rss hidden-xs"></span><span class="visible-xs">Blog</span></a></li>
                        <li><a target="new" href="mailto:[email protected]" class="btn btn-xs btn-warning btn-circle"><span class="fa fa-envelope-o hidden-xs"></span><span class="visible-xs">Contacto</span></a></li>

                    </ul>
                  </div>
              </div>
          </nav>

Intenté añadir un simple background en el css pero al parecer tengo un problema con los divs.

3
  • 1
    Tu código está demasiado enredado amigo, creo que te estás complicando un poco usando Bootstrap. ¿Te sirve si te ofrezco un código diferente con las clases de Bootstrap, pero que visualmente tenga la misma función a lo que ya tienes? Commented el 20 jul. 2019 a las 3:43
  • Sisi, todo es bienvenido @JheymanMejia
    – Sebastián
    Commented el 20 jul. 2019 a las 3:46
  • Pásate por el chat haciendo clic en este link chat.stackexchange.com/rooms/30872/stack-overflow-en-espanol Commented el 20 jul. 2019 a las 3:51

2 respuestas 2

0

La barra de navegación también se puede fijar en la parte superior o inferior de la página.

Una barra de navegación fija permanece visible en una posición fija (superior o inferior) independiente del desplazamiento de la página.

La clase .fixed-top hace que la barra de navegación esté fija en la parte superior:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="height:1500px">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>

<div class="container-fluid" style="margin-top:80px">
  <h3>Top Fixed Navbar</h3>
  <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
  <h1>Scroll this page to see the effect</h1>
</div>

</body>
</html>

Ejemplo de navbar top Bootstrap

2
  • Por favor lee Cómo responder, si bien el enlace representa una solución, es mejor incluirlo aqui (el código) así como una explicación, ya que los aportes que son solo enlaces se consideran de baja calidad; checa Cómo responder
    – user128299
    Commented el 15 may. 2020 a las 21:32
  • @BetaM listo! gracias por tu comentario Commented el 15 may. 2020 a las 21:39
0

Debes agregarle un color de fondo al DIV del menu (NAV) En tu css agrega:

#tf-menu {
background-color:#ffffff;
}

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.