Is there a way to implement a side bar on the collapse button on the navbar?
When I reduce the screen, I get the collapse button on the navbar with all the buttons on it.
When I click on that collapse button it expands the navbar and shows the buttons. Is there a way that instead of this expand button, it shows a side bar on the right or wrong side occupying the entire screen and showing the nav buttons?
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Add below css in your file
@media only screen and (max-width: 767px) {
#collapsibleNavbar {position: fixed;top: 0;left: -100%;bottom: 0;display: block;max-width: 320px;width: calc(100% - 80px);min-height: 100%;z-index: 999;transition: all 0.3s ease;background: #000000;}
#collapsibleNavbar.show {left: 0;}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.