# Navbar #4

    <nav class="navbar navbar-expand-lg navbar-light w-100">
        <div class="container px-3">
            <a class="navbar-brand" href="../../index.html"><img src="../../assets/images/logo/logo.svg" alt /></a>
            <button class="navbar-toggler offcanvas-nav-btn" type="button">
                <i class="bi bi-list"></i>
            </button>
            <div class="offcanvas offcanvas-start offcanvas-nav" style="width: 20rem">
                <div class="offcanvas-header">
                    <a href="../../index.html" class="text-inverse"><img src="../../assets/images/logo/logo.svg" alt /></a>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body pt-0 align-items-center">
                    <ul class="navbar-nav mx-auto align-items-lg-center">
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega Menu</a>
                        <div class="dropdown-menu dropdown-mega-menu">
                            <div class="px-4 pt-2 pb-2">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="lh-1 mb-5">
                                            <h3 class="mb-1">Heading title goes here</h3>
                                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque recusandae officia exercitationem.</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-12">
                                        <div class="border-bottom pb-2 mb-3">
                                            <h5 class="mb-0">Heading #1</h5>
                                        </div>
                                        <div>
                                            <a href="#">
                                                <div class="d-flex mb-3">
                                                    <div class="bg-light p-4 rounded-3 icon-lg"></div>
                                                    <div class="ms-2">
                                                        <small class="text-body">Small Text</small>
                                                        <h6 class="mb-0">Lorem ipsum dolor sit amet.</h6>
                                                    </div>
                                                </div>
                                            </a>
                                            <a href="#">
                                                <div class="d-flex mb-3">
                                                    <div class="bg-light p-4 rounded-3 icon-lg"></div>
                                                    <div class="ms-2">
                                                        <small class="text-body">Small Text</small>
                                                        <h6 class="mb-0">Lorem ipsum dolor sit amet.</h6>
                                                    </div>
                                                </div>
                                            </a>
                                            <a href="#">
                                                <div class="d-flex mb-3">
                                                    <div class="bg-light p-4 rounded-3 icon-lg"></div>
                                                    <div class="ms-2">
                                                        <small class="text-body">Small Text</small>
                                                        <h6 class="mb-0">Lorem ipsum dolor sit amet.</h6>
                                                    </div>
                                                </div>
                                            </a>
                                            <a href="#">
                                                <div class="d-flex mb-3">
                                                    <div class="bg-light p-4 rounded-3 icon-lg"></div>
                                                    <div class="ms-2">
                                                        <small class="text-body">Small Text</small>
                                                        <h6 class="mb-0">Lorem ipsum dolor sit amet.</h6>
                                                    </div>
                                                </div>
                                            </a>
                                            <div class="mt-4">
                                                <a href="#" class="btn btn-outline-primary btn-sm">Button</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-12 mt-4 mt-lg-0">
                                        <div class="border-bottom pb-2 mb-3">
                                            <h5 class="mb-0">Heading #2</h5>
                                        </div>
                                        <div>
                                            <a href="#">
                                                <div class="d-flex mb-3">
                                                    <div class="bg-light p-4 rounded-3 icon-lg"></div>
                                                    <div class="ms-2">
                                                        <small class="text-body">Small Text</small>
                                                        <h6 class="mb-0">Lorem ipsum dolor sit amet.</h6>
                                                    </div>
                                                </div>
                                            </a>
                                            <a href="#">
                                                <div class="d-flex mb-3">
                                                    <div class="bg-light p-4 rounded-3 icon-lg"></div>
                                                    <div class="ms-2">
                                                        <small class="text-body">Small Text</small>
                                                        <h6 class="mb-0">Lorem ipsum dolor sit amet.</h6>
                                                    </div>
                                                </div>
                                            </a>
                                            <a href="#">
                                                <div class="d-flex mb-3">
                                                    <div class="bg-light p-4 rounded-3 icon-lg"></div>
                                                    <div class="ms-2">
                                                        <small class="text-body">Small Text</small>
                                                        <h6 class="mb-0">Lorem ipsum dolor sit amet.</h6>
                                                    </div>
                                                </div>
                                            </a>
                                            <a href="#">
                                                <div class="d-flex mb-3">
                                                    <div class="bg-light p-4 rounded-3 icon-lg"></div>
                                                    <div class="ms-2">
                                                        <small class="text-body">Small Text</small>
                                                        <h6 class="mb-0">Lorem ipsum dolor sit amet.</h6>
                                                    </div>
                                                </div>
                                            </a>
                                            <a href="#">
                                                <div class="d-flex mb-3">
                                                    <div class="bg-light p-4 rounded-3 icon-lg"></div>
                                                    <div class="ms-2">
                                                        <small class="text-body">Small Text</small>
                                                        <h6 class="mb-0">Lorem ipsum dolor sit amet.</h6>
                                                    </div>
                                                </div>
                                            </a>
                                            <div class="mt-4">
                                                <a href="#" class="btn btn-outline-primary btn-sm">Button</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-12 mt-4 mt-lg-0">
                                        <div class="border-bottom pb-2 mb-3">
                                            <h5 class="mb-0">Heading #3</h5>
                                        </div>
                                        <div>
                                            <ul class="nav flex-column">
                                                <li class="nav-item">
                                                    <a href="#" class="nav-link">Link</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a href="#" class="nav-link">Link</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a href="#" class="nav-link">Link</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a href="#" class="nav-link">Link</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a href="#" class="nav-link">Link</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a href="#" class="nav-link">Link</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a href="#" class="nav-link">Link</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a href="#" class="nav-link">Link</a>
                                                </li>
                                            </ul>

                                            <div class="mt-4">
                                                <a href="#" class="btn btn-outline-primary btn-sm">Button</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                    </li>
                </ul>

                <form class="d-flex mt-3 mt-lg-0" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>