Bootstrap responsive sidebar menu to top navbar
Bootstrap 5 (update 2021)
Some of the classed have change for Bootstrap 5, but the concept is still the same. Here's an updated Bootstrap 5 sidebar to navbar example
Bootstrap 4 (original answer)
It could be done in Bootstrap 4 using the responsive grid columns. One column for the sidebar and one for the main content.
Bootstrap 4 Sidebar switch to Top Navbar on mobile
<div class="container-fluid h-100">
<div class="row h-100">
<aside class="col-12 col-md-2 p-0 bg-dark">
<nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start">
<div class="collapse navbar-collapse">
<ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between">
<li class="nav-item">
<a class="nav-link pl-0" href="#">Link</a>
</li>
..
</ul>
</div>
</nav>
</aside>
<main class="col">
..
</main>
</div>
</div>
Alternate sidebar to top
Fixed sidebar to top
For the reverse (Top Navbar that becomes a Sidebar), can be done like this example
how to convert bootstrap4 navbar to sidebar for mobile?
This question is very similar to: Create a responsive navbar sidebar "drawer" in Bootstrap 4? .. you have to implement a custom sidebar.
As explained, mobile sidebars can get complicated because there are many variations (push, overlay, auto-collapse, toggleable, icons, etc..) which is most likely the reason Bootstrap doesn't have sidebar component.
Use a CSS @media query to re-position the Navbar on mobile:
https://codeply.com/p/44bz8AG2EO
/* navbar becomes mobile sidebar under lg breakpoint */
@media (max-width: 992px) {
.navbar-collapse.collapsing .navbar-nav {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: -45%;
transition: all 0.2s ease;
}
.navbar-collapse.show .navbar-nav {
position: fixed;
top: 0;
bottom: 0;
left: 0;
flex-direction: column;
height: auto;
width: 45%;
transition: left 0.35s ease;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
}
Or, another option is to use the Bootstrap 4 modal as a sidebar but this also requires custom positioning and duplicate content:
https://codeply.com/p/LYPEZ5IRHH
Or, if the Navbar doesn't collapse, changing it to a sidebar can be done like this
How to use Bootstrap Top navbar and Sidebar?
give .sidebar top property it's value will be your header height
.sidebar {
position: absolute;
top: 50px;
}
Bootstrap 4 fixed top nav and fixed sidebar
The sticky-top is working, but it doesn't appear to be working for two reasons...
- There isn't enough content in the main content area to scroll
- It's positioned at
top:0so it hides behind the fixed navbar
Add CSS to offset the top of the sidebar (the same as height of fixed navbar).
.sticky-offset {
top: 56px;
}
<ul class="list-group sticky-top sticky-offset">..(sidebar)..</div>
And, then add enough content (or height) in the main area so that scrolling is necessary...
Working Demo: https://www.codeply.com/go/7XYosZ7VH5
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
..
</nav>
<div class="row">
<div id="sidebar-container" class="sidebar-expanded col-2 d-none d-md-block">
<ul class="list-group sticky-top sticky-offset">
<li>Menu item..</li>
<li>Menu item..</li>
</ul>
</div>
<div class="col">
<!-- MAIN -->
</div>
</div>
Create a responsive navbar sidebar drawer in Bootstrap?
Bootstrap 5 Beta 3 (update 2021)
There is now an offical Bootstrap 5 Offcanvas Component that makes creating sidebars much easier.
Of course it can still be done without using the Offcanvas component like this sidebar example for Bootstrap 5
Bootstrap 4 (original answer)
Sidebar navs can be very complex. This may be why Bootstrap doesn't have an "out-of- the-box" component. There are many considerations for Sidebars:
- Responsive - different width, visibility or orientation based on screen width?
- Multi-level - do the nav items have sub levels? How will this impact height?
- Toggleable - can the sidebar be toggled by a button or "hamburger"?
- Push vs. Overlay - is page content hidden behind or next to the sidebar?
- Left or right - is the sidebar to the left or right of page content?
- Fixed or sticky - how is the sidebar positioned on page scroll?
- Animation style - slide left/right/up/down?, collapse?
In this "sidebar" case... instead of using col-auto on the right column, use col. That way it will fill the width when the menu is collapsed: https://jsfiddle.net/0rhyzu7o/
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark" id="collapseExample">
..
</div>
<div class="col">
<div class="row">
<div class="col-12">
<button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
Menu
</button>
</div>
<div class="col-12">
..
</div>
</div>
</div>
</div>
</div>
To make the animation a little smoother, you must override Bootstrap's collapsing transition which normally works on height
EDIT:
Based on the bounty request, I updated the sidebar with 2 more examples. These are closer to the example, and mostly use Bootstrap classes.
Minimal version
This version is closer to the example, and has the same slide left/right "drawer" animation.
body {
height: 100vh;
overflow-x: hidden;
padding-top: 56px;
}
.vh-100 {
min-height: 100vh;
}
.sidebar.collapse.show,
.sidebar.collapse.show + .col {
transition: .18s ease;
transform: translate(0,0,0);
left: 0;
}
.sidebar.collapse,
.sidebar.collapsing,
.sidebar.collapsing + .col {
transition: .18s ease;
transform: translate(-25%,0,0);
z-index: 1050;
left: -25%;
}
Demo minimal version: https://codeply.com/go/w1AMD1EY3c
Full version (very close to the example):
This sidebar features:
- fixed-width
- automatically closes on smaller screens, opens on wider screens
- can be toggled open/closed at any width
- responsive - becomes a fixed overlay on smaller widths
This full version does require a little more CSS, but some of it is optional...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
body {
height: 100vh;
overflow-x: hidden;
padding-top: 55px;
}
/* set the sidebar width */
.w-sidebar {
width: 200px;
max-width: 200px;
}
.row.collapse {
margin-left: -200px;
left: 0;
transition: margin-left .15s linear;
}
.row.collapse.show {
margin-left: 0 !important;
}
.row.collapsing {
margin-left: -200px;
left: -0.05%;
transition: all .15s linear;
}
/* optional */
.vh-100 {
min-height: 100vh;
}
/* optional for overlay sidebar on small screens */
@media (max-width:768px) {
.row.collapse,
.row.collapsing {
margin-left: 0 !important;
left: 0 !important;
overflow: visible;
}
.row > .sidebar.collapse {
display: flex !important;
margin-left: -100% !important;
transition: all .3s linear;
position: fixed;
z-index: 1050;
max-width: 0;
min-width: 0;
flex-basis: auto;
}
.row > .sidebar.collapse.show {
margin-left: 0 !important;
width: 100%;
max-width: 100%;
min-width: initial;
}
.row > .sidebar.collapsing {
display: flex !important;
margin-left: -10% !important;
transition: all .2s linear !important;
position: fixed;
z-index: 1050;
min-width: initial;
}
}
</style>
<div class="container-fluid fixed-top bg-dark py-3">
<div class="row collapse show no-gutters d-flex h-100 position-relative">
<div class="col-3 px-0 w-sidebar navbar-collapse collapse d-none d-md-flex">
<!-- spacer col -->
</div>
<div class="col px-2 px-md-0">
<!-- toggler -->
<a data-toggle="collapse" href="#" data-target=".collapse" role="button" class="p-1">
<i class="fa fa-bars fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="container-fluid px-0 h-100">
<div class="row vh-100 collapse show no-gutters d-flex h-100 position-relative">
<div class="col-3 p-0 vh-100 h-100 w-sidebar navbar-collapse collapse d-none d-md-flex sidebar">
<!-- fixed sidebar -->
<div class="position-fixed bg-dark text-white h-100 w-sidebar pl-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
<div class="col p-3">
<h3>Content..</h3>
<p class="lead">Try this is full-page view to see the animation on larger screens!</p>
<p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog. Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table!</p>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>Bootstrap 4 responsive sidebar menu window resize
The issue that the content is bigger than the parent column so you can simply just adjust the font size, the padding or both and you could add this in a media query at the desired widths. You could try something like the following:
nav .list-group-item {font-size:12px;padding:.75rem .75rem;}
That should do the trick. If it were me just for looks I would give the .list-group and the .list-group-item a width of 100% as well. This isn't necessary I just think it looks better and figured I would suggest it so that would be:
nav .list-group{width:100%;}
nav .list-group-item {width:100%;font-size:12px;padding:.75rem .75rem;}
Here is your updated snippet with that change:
nav .list-group{width:100%;}
nav .list-group-item {width:100%;font-size:12px;padding:.75rem .75rem;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<div class="row no-gutters" style="margin-left: 15px;margin-right: 15px;">
<div class="col-sm-2">
<nav class="navbar navbar-expand-lg navbar-expand-md navbar-expand-sm">
<button id="filter_control" class="navbar-toggler" data-target="#filter_container3" data-toggle="collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<p><i class="fas fa-sliders-h" style="padding-right:5px;"></i>=More Settings </p>
</button>
<!--collapse for filter and flex-column to make narrow column-->
<div id="filter_container3" class="collapse navbar-collapse" style="margin-top:50px;">
<div class="list-group text-secondary">
<a class="list-group-item list-group-item-action" href="404.html"><span>Account</span></a>
<a class="list-group-item list-group-item-action" href="account.html"><span>Subject</span></a>
<a class="list-group-item list-group-item-action"><span>Class</span></a>
<a class="list-group-item list-group-item-action"><span>Schedule</span></a>
<a class="list-group-item list-group-item-action"><span>Log</span></a>
<a class="list-group-item list-group-item-action"><span>Billing</span></a>
</div>
</div>
</nav>
</div>
<!--mid col-->
<div class="col-12 col-sm-10">
<div class="row no-gutters" style="margin-top:25px;">
<div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
<div class="card bg-success">
<div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
<h6 class="text-truncate text-center text-white">Appt</h6>
</div>
<div class="card-body" style="padding: 12px;">
<div class="row no-gutters">
<div class="col" style="padding-left: 0px;padding-right: 0px;">
<h5 class="text-truncate text-white">Coming</h5>
</div>
<div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
<h5 class="text-white"><i class="far fa-calendar-check" style="opacity: 1;"></i></h5>
</div>
</div>
<div class="row no-gutters text-right">
<div class="col">
<h5 class="text-white">4</h5>
</div>
</div><a href="#" class="card-link">Link</a></div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
<div class="card bg-primary">
<div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
<h6 class="text-truncate text-center text-white">Messages</h6>
</div>
<div class="card-body" style="padding: 12px;margin: 0px;">
<div class="row no-gutters">
<div class="col" style="padding-left: 0px;padding-right: 0px;">
<h5 class="text-truncate text-white">New</h5>
</div>
<div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
<h5 class="text-white"><i class="far fa-comment"></i></h5>
</div>
</div>
<div class="row no-gutters text-right">
<div class="col">
<h5 class="text-white">2</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
<div class="card bg-warning">
<div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
<h6 class="text-truncate text-center text-white">Log</h6>
</div>
<div class="card-body" style="opacity: 1;padding: 12px;">
<div class="row no-gutters">
<div class="col" style="padding-left: 0px;padding-right: 0px;">
<h5 class="text-truncate text-white">Hours</h5>
</div>
<div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
<h5 class="text-white">4 <i class="far fa-clock"></i></h5>
</div>
</div>
<div class="row no-gutters">
<div class="col">
<h4 class="text-right text-white"></h4>
</div>
<div class="col">
<h5 class="text-right text-white">50</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
<div class="card bg-info">
<div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
<h6 class="text-truncate text-center text-white">Reviews</h6>
</div>
<div class="card-body" style="padding: 12px;">
<div class="row no-gutters">
<div class="col" style="padding-left: 0px;padding-right: 0px;">
<h5 class="text-truncate text-white">Total</h5>
</div>
<div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
<h5 class="text-white">3.5 <i class="fa fa-star"></i></h5>
</div>
</div>
<div class="row no-gutters text-right">
<div class="col">
<h5 class="text-white">145 Reviews</h5>
</div>
</div><a href="#" class="card-link">Link</a></div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col">
<div>
<form></form>
</div>
</div>
<div class="col"></div>
</div>
</div>
</div>Related Topics
Hover and Click on CSS Triangle
Text with Image Background in Svg or CSS
Align Material Icon with Text on Materialize
Absolute Position Affects Width
Vertically Center in Viewport Using CSS
Differencebetween P:Nth-Child(2) and P:Nth-Of-Type(2)
How to Unskew Background Image in Skewed Layer (Css)
Adding a Small Picture on the Right Side of Textfield with CSS
Font Sizes: Ems VS Pixels... in 2011, Which One Should Be Used
Attribute Selector Where Value Equals Either a or B
Is There a CSS "Haschildren" Selector
@Import Styles Not Working in a Media Query
How to Detect the User's Browser and Apply a Specific CSS File
Create Horizontally Scrolling List Item View Using Bootstrap Columns