Bootstrap 4: menu della barra laterale reattivo alla barra di navigazione superiore

Quindi ho cercato e cercato indicazioni in questo senza alcun risultato.

Fondamentalmente, voglio solo avere una barra laterale, ma quando lo schermo diventa piccolo, ovvero lo schermo dello smartphone, si trasforma in una barra di navigazione.

Il mio codice HTML per la barra laterale è questo:

 

Il mio CSS:

 #fixed-sidebar { position: fixed; max-width: 20%; color: white; } 

Non ho idea di come inserirlo in una barra di navigazione. Tutto quello che so è come far partire la barra di navigazione, ma non lo voglio! Non voglio nessuna di quelle fantasiose animazioni-sovrapposte-multicolor-qualsiasi cosa, per favore-

Grazie 🙂

Potrebbe essere fatto in Bootstrap 4 usando le colonne della griglia retriggers. Una colonna per la barra laterale e una per il contenuto principale.

Bootstrap 4 Sidebar passa a Top Navbar sul cellulare

 
..

Barra laterale di esempio alternativa verso l’alto

Per il contrario (Top Navbar che diventa una barra laterale ), può essere fatto come in questo esempio

Grande schermo :

barra laterale di navigazione a grande schermo

Schermo piccolo (mobile)

barra laterale in piccolo schermo di dimensioni mobili

se questo è quello che volevi, questo è il codice 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; } } 
       Collapsible sidebar using Bootstrap 3         

Se questa non è una buona soluzione per qualsiasi motivo, per favore fatemelo sapere. Ha funzionato bene per me.

Quello che ho fatto è hide la barra laterale e quindi far apparire la barra di navigazione con i punti di interruzione

 @media screen and (max-width: 771px) { #fixed-sidebar { display: none; } #navbar-superior { display: block !important; } } 

Potresti anche solo usare un menu / una barra laterale come pushy: https://chrisyee.ca/pushy/