I'm sure this question has been asked an answered before but I just am not finding it.
I have a fairly simple Bootstrap question (I hope). I have a standard site with top nav and 2 columns below (in container, not container-fluid). The left side column is for filtering content on the right side/main column (ex. filter rows by city, filter rows by date, etc...).
However, on mobile, I need that left filter column to slide out (similar to a navbar). I've also seen models do that fairly well. Example
I just don't know how to make it so it always shows on large screens but acts as this slide out modal triggered by a button on small screens. Here's a codepen that I started...
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container mt-5 ">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<h4>Side Navigation/Filters</h4>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="col-12 col-lg-9">
<button type="button" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#sideSlidoutModal">
Show Side/Filter Nav (mobile only)
</button>
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere risus non ante ullamcorper cursus vel et est. Suspendisse eros eros, tristique ut sapien at, vulputate tincidunt orci. Donec pharetra, augue eu lobortis pellentesque, est
nunc malesuada libero, sed imperdiet massa velit vel arcu. Mauris lobortis nibh nec dolor maximus, a mollis erat ullamcorper. Nam odio nisi, ultricies in euismod ut, dapibus in nisl. Phasellus imperdiet, nulla non eleifend ultricies, libero
enim sollicitudin erat, nec mollis odio ipsum tristique massa. Aliquam nec tortor dictum, egestas lectus a, accumsan augue.
</p>
<p>Phasellus imperdiet, nulla non eleifend ultricies, libero enim sollicitudin erat, nec mollis odio ipsum tristique massa. Aliquam nec tortor dictum, egestas lectus a, accumsan augue.
</p>
</div>
</div>
</main>
<!-- /.container -->
</body>
</html>I'm sure I'm making this a lot harder than it needs to be. Thanks in advance for any suggestions!
By using customization you can easily manage any structure as you wish.
$('.open_sidemenu_button').click(function(e){
$('.mobile_side_nav').toggleClass('menu_open');
$('body').toggleClass('back_drop');
e.stopPropagation();
});
$('.mobile_side_nav').click(function(e){
e.stopPropagation();
});
$('body').click(function(){
$('.mobile_side_nav').removeClass('menu_open');
$('body').removeClass('back_drop');
});@media (max-width: 991px){
.main_page .container{
position: relative;
}
.main_page .mobile_side_nav{
position: fixed;
top: 0;
bottom: 0;
left: -300px;
-ms-flex: 0 0 300px;
flex: 0 0 300px;
max-width: 300px;
min-width: 300px;
background-color: #fff;
box-shadow: 0px 0px 5px #000;
transition: all 0.5s;
z-index: 999;
padding: 15px;
}
.main_page .mobile_side_nav.menu_open{
left: 0;
}
body.back_drop:before {
content: "";
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 11;
}
}<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="main_page">
<div class="container pt-5">
<div class="row">
<div class="mobile_side_nav col-lg-3">
<button type="button" class="open_sidemenu_button d-block d-lg-none btn btn-xs btn-danger ml-auto">X</button>
<h5>Side Navigation/Filters</h5>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="col-12 col-lg-9">
<button type="button" class="open_sidemenu_button d-block d-lg-none btn btn-xs btn-primary">Show Side/Filter Nav (mobile only)</button>
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere risus non ante ullamcorper cursus vel et est. Suspendisse eros eros, tristique ut sapien at, vulputate tincidunt orci. Donec pharetra, augue eu lobortis pellentesque, est
nunc malesuada libero, sed imperdiet massa velit vel arcu. Mauris lobortis nibh nec dolor maximus, a mollis erat ullamcorper. Nam odio nisi, ultricies in euismod ut, dapibus in nisl. Phasellus imperdiet, nulla non eleifend ultricies, libero
enim sollicitudin erat, nec mollis odio ipsum tristique massa. Aliquam nec tortor dictum, egestas lectus a, accumsan augue.
</p>
<p>Phasellus imperdiet, nulla non eleifend ultricies, libero enim sollicitudin erat, nec mollis odio ipsum tristique massa. Aliquam nec tortor dictum, egestas lectus a, accumsan augue.
</p>
</div>
</div>
</div>
</div>
</body>
</html>