Description:
Previously, you must have written a lot of codes in order to create a responsive Offcanvas menu bar for your project. And now, Bootstrap came in the picture and things are being easy day by day. Here, I’m going to share with you an example, you can create responsive Offcanvas menu very easily. It does combines the Offcanvas and navbar menu that come with Bootstrap 5.
You might be interested in these too:
A beautiful responsive sidebar navigation built for Bootstrap 5Create responsive fixed sidebar menu with icons using pure CSS
How can I use it?
First of all, you’ll need to include Bootstrap 5 framework in your page. Either you can use CDN or you can use the same included in this example project. And iclude it under <HEAD> tag.
<link rel = ‘stylesheet’ href = ‘css/bootstrap.min.css’>
<script src = ‘js/bootstrap.bundle.min.js’></script>
And then, write the HTML tags:
<nav class = ‘navbar navbar-expand-lg navbar-light bg-danger’>
<div class = ‘container’>
<a class = ‘navbar-brand text-white’ href = ‘#’>Navbar</a>
<button class = ‘btn btn-danger navbar-toggler border-3 px-2’ type = ‘button’ data-bs-toggle = ‘offcanvas’ data-bs-target = ‘#offcanvasExample’ aria-controls = ‘offcanvasExample’>
<img style = ‘width: 30px’ src = ‘image/text-center.svg’ alt = ‘menu icon’>
</button>
<div class = ‘offcanvas offcanvas-start-lg bg-danger’ tabindex = ‘-1’ id = ‘offcanvasExample’aria-labelledby = ‘offcanvasExampleLabel’>
<div class = ‘offcanvas-header d-flex d-lg-none’>
<h5 class = ‘offcanvas-title text-white’ id = ‘offcanvasExampleLabel’>Navbar</h5>
<a href=’javascript:void(0) ‘ class = ‘text-reset p-0’ data-bs-dismiss = ‘offcanvas’ aria-label = ‘close’>
<svg xmlns = ‘http://www.w3.org/2000/svg’
width = ’24’
height = ’24’
fill = ‘#FFFFFF’
class = ‘bi bi-x-circle’
viewBox = ‘0 0 16 16’
>
<path d = ‘M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z’/>
<path d = ‘M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z’/>
</svg>
</a>
</div>
<div class = ‘offcanvas-body p-lg-0’>
<ul class = ‘navbar-nav’>
<li class = ‘nav-item’>
<a class = ‘nav-link active’ aria-current = ‘page’ href = ‘#’>Home</a>
</li>
<li class = ‘nav-item’>
<a class = ‘nav-link active’ aria-current = ‘page’ href = ‘#’>About</a>
</li>
<li class = ‘nav-item’>
<a class = ‘nav-link active’ aria-current = ‘page’ href = ‘#’>Skills</a>
</li>
<li class = ‘nav-item’>
<a class = ‘nav-link active’ aria-current = ‘page’ href = ‘#’>Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
And finally, create a <style> tag or just a .css file and put the CSS into it.
@media (min-width : 992px) {
.offcanvas {
visibility : visible;
position : relative;
background : none;
border : none;
justify-content : end;
color : red;
}
}
@media (max-width : 992px) {
.offcanvas {
width : 250px !important;
}
.offcanvas-start-lg {
top : 0;
left : 0;
border-right : 1px solid rgba(0, 0, 0, .2);
transform : translateX(-100%);
}
}
.navbar-nav li a {
color: white !important;
}
The post Create fully responsive Offcanvas menu section using Bootstrap 5 appeared first on Lipku.com.