1

quiero que el navbar baje cuando me desplego hacia abajo puse el navbar fixed-top, se desplega el navbar pero desde el comienzo se pone encima de unos botones que tengo, como podría hacerlo con boostrap. Imagen de como esta ahora https://ibb.co/FbWY90c

 <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light fixed-top">
    <!-- Left navbar links -->
    <ul class="navbar-nav ">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-  bars"></i></a>
      </li>
      <a onclick="cargar_conte('conte_princ','apr/view_apr.php')" class="nav-link">
      <i class="nav-icon fas fa-table"></i>
        <a href="index.php" class="nav-link">Inicio</a>
    </li>
      </li>
      </p>
            </a>
    </ul>
    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Notifications Dropdown Menu -->
      <li class="nav-item">
        <a class="nav-link" data-widget="fullscreen" href="#" role="button">
          <i class="fas fa-expand-arrows-alt"></i>
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
        <span><?php echo $_SESSION['S_USU']?></span>
          <i class="fas fa-caret-down"></i>
          <span class="badge badge-warning navbar-badge"></span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
        <a href="../controller/usuario/controlador_cerrar_sesion.php" class="dropdown-item">
        <i class="fas fa-sign-out-alt"></i>Cerrar Sesión
        </a>
          <div class="dropdown-divider"></div>
        </div>
      </li>
    </ul>
  </nav>

2 respuestas 2

1

Prueba agregando esto en tu CSS:

body {
    padding-top: 70px;
}

Con ese atributo en el body estableces una distancia de 70 pixeles entre la parte superior de la ventana y el contenido del body, exceptuando el nav con el fixed-top que se superpone por encima.

Puedes modificar ese 70px por lo que quieras. Normalmente el nav son unos 50px pero puede variar según la versión de bootstrap o las modificaciones que le hayas realizado.

9
  • Me funciono pero el main siderbar se movió: ibb.co/6nk3zkZ
    – luiss
    Commented el 22 mar. 2022 a las 20:37
  • mmm... quizas debas ponerle tambien un fixed-top? algo asi deberás hacer
    – masterguru
    Commented el 22 mar. 2022 a las 20:41
  • masterguru, habrá otra forma de hacer lo q digo?
    – luiss
    Commented el 22 mar. 2022 a las 21:14
  • A ver, a ciegas poco puedo ayudar, no se como está codificado ese main sidebar. Se me ocurre que intentes ponerle un padding-top: -70px a ver si cuela, pero repito, si no lo veo no estoy seguro de lo que te estoy diciendo porque no puedo reproducir tu escenario y verificarlo
    – masterguru
    Commented el 22 mar. 2022 a las 22:36
  • 1
    Bueno, segun ese código estas usando AdminLTE, que tiene sus propias clases para todo eso, aparte de las de bootstrap. Quizas deberias mirarte sus clases y ver cual de ellas te puede ir mejor. En este enlace veo que muestran algunas: adminlte.io/docs/3.0/layout.html. Es más, esa propia página tiene una disposición parecida a la que quieres, pues mira su código fuente y las clases que usa para conseguirlo (quizas tendras que quitar lo del fixed-top de bootstrap y usar las suyas)
    – masterguru
    Commented el 23 mar. 2022 a las 5:07
0

La respuesta del navbar para que este fijo esta en la documentación de AdminLTE 3: https://adminlte.io/themes/v3/pages/layout/fixed-topnav.html Es agregar en el body: layout-navbar-fixed

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.