0

Estoy nuevo con Bootstrap, deseo desarrollar un menú de navegación similar al de la siguiente página web: grab.com . Actualmente estoy tratando de hacer la parte de los submenús, lo que quiero lograr es ese efecto que se activa al hacer click en cualquiera de los links del menú, es decir, que aparezca un submenú debajo de la barra de navegación. En la documentación de Bootstrap explican como hacer un submenú pero aparece con un estilo diferente, lo que quiero lograr es un efecto igual al de la página mencionada anteriormente. Es importante destacar que el efecto ya lo logré con la componente Collapse pero el problema es que está fuera de la barra de navegación y al redimensionar el tamaño de la pantalla este no se adapta con los demás links de la barra de navegación. Seguramente hay una mejor forma de hacerlo pero no he dado con la solución, espero alguien pueda echarme una mano. Adjunto algunas capturas.

Aquí está mi código: `

Services Clients Contact Us! Login

<div class="collapse navbar-expand-lg multi-collapse" id="multiCollapseExample1">
  <div id="barra-secundaria">
    <ul class="navbar-nav mr-auto flex-row justify-content-center">
      <li class="nav-item" id="enlaces">
        <a class="nav-link" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Services</a>
      </li>
      <li class="nav-item" id="enlaces">
        <a class="nav-link" href="#">Clients</a>
      </li>
      <li class="nav-item" id="enlaces">
        <a class="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Contact Us!</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Login</a>
      </li>
    </ul>
  </div>
</div>`

Acá dejo algunas vistas de como se ve en resolución de escritorio y en móvil:

Vista1

Vista2

2
  • Por favor cambia las imágenes por texto formateado en código para que podamos editar y ver mejor tu código y así poder ayudarte. Commented el 2 nov. 2018 a las 3:45
  • Listo amigo, ya hice la modificación.
    – JulianProg
    Commented el 2 nov. 2018 a las 3:54

2 respuestas 2

0

Te recomiendo que al principio sigas siempre las estruturas proporcionadas por bootstrap hasta que te familiarices del todo con ellas te dejo un claro ejemplo de como realizar un nav reponsive con dropdown y enlace a la documentación donde puedes ver más ejemplos:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Aquí puedes acceder a la documentación de Bootstrap sobre menús de navegación por si te resultase útil en para tu proyecto: bootstrap navbar

-2

Visita esta página, hay muchos componentes, es intuitiva y muy fácil de usar. https://hackerthemes.com/bootstrap-cheatsheet/

1
  • Gracias por tomarte el tiempo en responder amigo, busqué en esa página pero no encontré nada similar a lo que necesito.
    – JulianProg
    Commented el 2 nov. 2018 a las 13:53

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.