Bootstrap 4: menú de barra lateral sensible a la barra de navegación superior

Esta cuestión se puede tratar de diversas formas, sin embargo te compartimos la solución más completa para nosotros.

Solución:

Se podría hacer en Bootstrap 4 usando las columnas de cuadrícula receptivas. Una columna para la barra lateral y otra para el contenido principal.

Bootstrap 4 Cambio de la barra lateral a la barra de navegación superior en movil

    

        
        

            ..
        
    

Barra lateral alternativa hacia arriba
Barra lateral fija en la parte superior

Para el reverso (Arriba Barra de navegación que se convierte en una barra lateral), se puede hacer como este ejemplo

Pantalla grande:

Pantalla pequeña (móvil)

si esto es lo que querías, este es el código https://plnkr.co/edit/PCCJb9f7f93HT4OubLmM?p=preview

CSS + HTML + JQUERY:

    
    @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
    body 
      font-family: 'Poppins', sans-serif;
      background: #fafafa;
    
    
    p 
      font-family: 'Poppins', sans-serif;
      font-size: 1.1em;
      font-weight: 300;
      line-height: 1.7em;
      color: #999;
    
    
    a,
    a:hover,
    a:focus 
      color: inherit;
      text-decoration: none;
      transition: all 0.3s;
    
    
    .navbar 
      padding: 15px 10px;
      background: #fff;
      border: none;
      border-radius: 0;
      margin-bottom: 40px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    
    
    .navbar-btn 
      box-shadow: none;
      outline: none !important;
      border: none;
    
    
    .line 
      width: 100%;
      height: 1px;
      border-bottom: 1px dashed #ddd;
      margin: 40px 0;
    
    /* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
    
    #sidebar 
      width: 250px;
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      z-index: 999;
      background: #7386D5;
      color: #fff !important;
      transition: all 0.3s;
    
    
    #sidebar.active 
      margin-left: -250px;
    
    
    #sidebar .sidebar-header 
      padding: 20px;
      background: #6d7fcc;
    
    
    #sidebar ul.components 
      padding: 20px 0;
      border-bottom: 1px solid #47748b;
    
    
    #sidebar ul p 
      color: #fff;
      padding: 10px;
    
    
    #sidebar ul li a 
      padding: 10px;
      font-size: 1.1em;
      display: block;
      color:white;
    
    
    #sidebar ul li a:hover 
      color: #7386D5;
      background: #fff;
    
    
    #sidebar ul li.active>a,
    a[aria-expanded="true"] 
      color: #fff;
      background: #6d7fcc;
    
    
    a[data-toggle="collapse"] 
      position: relative;
    
    
    a[aria-expanded="false"]::before,
    a[aria-expanded="true"]::before 
      content: 'e259';
      display: block;
      position: absolute;
      right: 20px;
      font-family: 'Glyphicons Halflings';
      font-size: 0.6em;
    
    
    a[aria-expanded="true"]::before 
      content: 'e260';
    
    
    ul ul a 
      font-size: 0.9em !important;
      padding-left: 30px !important;
      background: #6d7fcc;
    
    
    ul.CTAs 
      padding: 20px;
    
    
    ul.CTAs a 
      text-align: center;
      font-size: 0.9em !important;
      display: block;
      border-radius: 5px;
      margin-bottom: 5px;
    
    
    a.download 
      background: #fff;
      color: #7386D5;
    
    
    a.article,
    a.article:hover 
      background: #6d7fcc !important;
      color: #fff !important;
    
    /* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
    
    #content 
      width: calc(100% - 250px);
      padding: 40px;
      min-height: 100vh;
      transition: all 0.3s;
      position: absolute;
      top: 0;
      right: 0;
    
    
    #content.active 
      width: 100%;
    
    /* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
    
    @media (max-width: 768px) 
      #sidebar 
        margin-left: -250px;
      
      #sidebar.active 
        margin-left: 0;
      
      #content 
        width: 100%;
      
      #content.active 
        width: calc(100% - 250px);
      
      #sidebarCollapse span 
        display: none;
      
    

si esto es lo que quieres.

Si haces scroll puedes encontrar las interpretaciones de otros sys admins, tú todavía tienes el poder mostrar el tuyo si lo crees conveniente.

---

---

Utiliza Nuestro Buscador