1

tengo un navbar basico de bootstrap 4... que al acceder con dispositivos mobiles el menu del navbar se habre desde hacia arriba.. como puedo hacer que el menu se habra de forma vertical y asi tenga una aspecto mas nativo de dispositivos mobiles?

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-sm-start fixed-top">
<div class="container">
  <a class="navbar-brand" href="{{url('/puntajes')}}">Carsanies</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          {{ Auth::user()->USUARIO }}
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
          <a class="dropdown-item" href="#">Mi numero de cuenta: {{ Auth::user()->id }}</a>
          <a class="dropdown-item" href="#">{{ Auth::user()->USUARIO }}</a>
          <a class="dropdown-item" href="{{url('/cambiar_contrasena')}}">Cambiar Contraseña</a>
          <a class="dropdown-item" href="{{ url('/logout') }}">Salir</a>
        </div>
      </li>
    </ul>
  </div>
</div>

3
  • No entiendo a que te refieres con "de forma vertical"
    – IvanS95
    Commented el 2 abr. 2019 a las 20:44
  • 1
    Creo que te refieres a un sidebar. Aunque Bootstrap hasta la fecha no tenga ese componente nativo, podemos hacerlo con CSS y jQuery Commented el 2 abr. 2019 a las 21:09
  • La verdad ni siquiera es muy necesario jQuery, yo sugeria evitarlo, aunque bien, si ya de por si se esta utilizando Bootstrap jQuery esta bien
    – IvanS95
    Commented el 2 abr. 2019 a las 21:41

1 respuesta 1

2

Lamentablemente hasta la fecha Bootstrap no ofrece algun componente que puedas utilizar de manera sencilla como un sidebar; si bien podrias modificar elementos para esto, yo te recomendaria crear tu propia estructura para manejar una sidebar hecha desde 0, y luego puedes utilizar los componentes de Bootstrap dentro de esa estructura sin problemas.

Asi te evitaras hacerle muchas alteraciones a los estilos de Bootstrap y sus componentes; aqui un ejemplo bastante sencillo de una sidebar que empuja el contenido para ocupar el espacio

document.getElementById('toggle').onclick = function() {
  document.getElementById('sidebar').classList.toggle('hidden')
}
body {
  margin: 0;
}

.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: stretch;
}

.sidebar {
  width: 150px;
  background-color: white;
  transition: all 0.2s ease-in-out;
}

.sidebar.hidden {
  margin-left: -150px;
}

.content {
  color: white;
  background-color: black;
  width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div id="sidebar" class="sidebar hidden">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="content p-5">
    <h1>Content</h1>
    <button id="toggle" class="btn btn-success btn-lg">Toggle</button>
  </div>
</div>

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.