1

Estoy teniendo problemas a la hora de agregar un dropdown a mi navbar en bootstrap 5; este es mi navbar:

<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
    <div class="container-fluid">
        <a class="navbar-brand" id="navbar-app-name" href="#">Inicio</a>
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="navbar-list-ul">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Y para el dropdown, debido a que cuando le daba click la página se hacía más grande, decidí agregarle estos estilos css para evitar eso:

#navbar-list-ul
{
    margin-right: 60px;
}

Hasta ahí todo va bien, pero si hago la página mas pequeña, simulando un teléfono, al darle click al navbar el navbar se "deforma" por llamarlo de alguna forma, haciendo el navbar verse de esta forma:

introducir la descripción de la imagen aquí

¿Cómo evitar que el navbar se vea como la imagen anteriormente agregada, y que se vea un poco más como el navbar de laravel5 (por dar algún ejemplo)?

1 respuesta 1

3

En bootstrap 5 hay una clase para evitar el problema que tienes, que debes aplicar conjuntamente con dropdown-menu sin necesidad de editar ni crear ningun estilo nuevo.

Se llama dropdown-menu-end y en este enlace lo explican: https://getbootstrap.com/docs/5.1/components/dropdowns/#menu-alignment

Add .dropdown-menu-end to a .dropdown-menu to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning .dropdown-menu-end will appear on the left side.

Por lo tanto, elimina el estilo CSS que has aplicado y modifica esto:

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">

por esto:

<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">

Aquí te dejo un snippet para que lo compruebes:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
  <div class="container-fluid">
    <a class="navbar-brand" id="navbar-app-name" href="#">Inicio</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="navbar-list-ul">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

En cuanto al problema de la página pequeña, tienes dos posibles opciones.

  1. Usar navbar-expand en lugar de navbar-expand-md en el elemento nav. Expicado aquí: https://getbootstrap.com/docs/5.1/components/navbar/#responsive-behaviors

  2. Colapsar el menú usando un botón con la clase navbar-toggler a continuación del navbar-brand y encerrando el resto del nav en un div con las clases collapse navbar-collapse. Si miras el snippet verás que también lo acabo de poner. Y también aparece en la documentación de bootstrap 5 relativa a los navbar donde encontrarás más información.

5
  • Hola, muchas gracias por la ayuda, pero el problema sigue ya que si la pantalla la hago pequeña aún se deforma el navbar, ¿cómo puedo evitar eso? De todas formas gracias :)
    – DFG
    el 8 ene. 2022 a las 23:25
  • @DavidFloresGarcía Acabo de agregar la solución de bootstrap para los casos de páginas pequeñas. Seguramente no será lo que quieres, pero lo habitual es hacerlo así.
    – masterguru
    el 8 ene. 2022 a las 23:40
  • @DavidFloresGarcía: Vuelve a mirar mi respuesta, al final veo que lo de la página pequeña si que se puede hacer como tu quieres (más o menos) cambiando navbar-expand-md por navbar-expand (cosa que no sabia hasta ahora).
    – masterguru
    el 9 ene. 2022 a las 0:02
  • Muchas gracias, con las soluciones que me diste ya funcionó :)
    – DFG
    el 9 ene. 2022 a las 0:05
  • 1
    Perfecto :-) Me alegro
    – masterguru
    el 9 ene. 2022 a las 0:07

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.