Responsive Bootstrap 5 Header Snippet with Dropdown & Navbar Toggler

Download this responsive Bootstrap 5 header snippet featuring a collapsible navbar, dropdown menus, and a customizable design for your website.

HTML

<nav class="navbar navbar-light bg-light" id="header_2">
    <div class="container-fluid">
        <a class="navbar-brand" href="#0">LOGO</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#0">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#0">About</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#0" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Social Media
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                        <li><a class="dropdown-item" href="#0">Facebook</a></li>
                        <li><a class="dropdown-item" href="#0">Twitter</a></li>
                        <li><a class="dropdown-item" href="#0">Linkedin</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#0">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#0">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

CSS

#header_2 {
    position: relative;
    padding: 10px 0;
    border: 1px solid #e7e7e7;
    background-color: #fff !important;
}
#header_2 .collapsing,
#header_2 .collapse,
#header_2 .navbar-collapse {
    height: 100vh !important;
}
#header_2 .navbar-collapse {
    width: 0 !important;
    transition: all 0.4s;
    opacity: 0;
    display: block !important;
    position: fixed;
    height: 100% !important;
    left: 0;
    top: 62px;
    background: #fff;
    border: 1px solid #e7e7e7;
}
#header_2 .navbar-collapse.collapse.show {
    width: 300px !important;
    opacity: 1;
}
#header_2 .navbar-toggler:focus {
    box-shadow: none;
}
#header_2 .nav-item > .nav-link {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
#header_2 .nav-item > .nav-link.active,
#header_2 .nav-item > .nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
    color: brown;
}
#header_2 .nav-item.dropdown .dropdown-menu {
    width: 95%;
    margin-left: auto;
    border: 0;
    background: transparent;
}
#header_2 ul li a {
    font-weight: 600;
}
#header_2 ul li ul li a:hover {
    color: brown;
    background-color: transparent;
}
@media (max-width: 576px) {
    #header_2 .navbar-collapse.collapse.show {
        width: 100% !important;
    }
}

JS

Width:

Height:

The Bootstrap 5 header snippet presented here is a versatile, responsive, and customizable solution for creating professional and modern website headers. This snippet, built using HTML, CSS, and Bootstrap 5, offers a clean and minimalist design that can be easily integrated into various web projects. This header snippet is fully responsive, making it suitable for all screen sizes, from desktops to mobile devices. The responsive nature is achieved using Bootstrap 5’s grid system and media queries, ensuring that the header looks great on any device. The snippet includes a collapsible navbar, which automatically converts into a vertical menu for mobile devices, offering a seamless user experience.