Author: | musayazlik |
---|---|
Views Total: | 15,513 views |
Official Page: | Go to website |
Last Update: | May 31, 2021 |
License: | MIT |
Preview:

Description:
A responsive off-canvas navigation system that combines with Bootstrap 5 off-canvas and navbar components.
How to use it:
1. Include the required Bootstrap 5 framework on the page.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
2. The HTML structure for the offcanvas menu.
<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="#">Blog</a> </li> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Contact</a> </li> </ul> </div> </div> </div> </nav>
3. The necessary CSS styles for the offcanvas menu.
@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; }