Responsive Bootstrap 5 Header with Dropdown Menu and Icons

Design a modern, responsive header with Bootstrap 5, featuring customizable icons, a sleek layout, and an expandable navigation bar for enhanced user experience.

HTML

<nav id="header_snippet_1" class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#"><img src="https://freewebsnippets.com/public/frontend/img/logo.svg" alt="Logo"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <span id="close-btn" class="d-lg-none" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-label="Close">
                <i class="bi bi-x-lg"></i>
            </span>
            <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" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact</a>
                </li>
            </ul>
            <div class="icon">
                <ul>
                    <li><a href="#"><i class="bi bi-search"></i></a></li>
                    <li><a href="#"><i class="bi bi-person"></i></a></li>
                    <li><a href="#"><i class="bi bi-cart"></i></a></li>
                </ul>
            </div>                
        </div>
    </div>
</nav>
<section>
        <img src="https://images.pexels.com/photos/3756915/pexels-photo-3756915.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" width="100%" alt="freewebsnippets">
    </section>

CSS

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
body {
    font-family: "Nunito", sans-serif;
}
#header_snippet_1 {
    background-color: #000;
    padding: 25px 0;
}
#header_snippet_1 .navbar-brand {
    width: 100px;
    margin: 0;
    padding: 0;
}
#header_snippet_1 #navbarSupportedContent {
    justify-content: flex-end;
}
#header_snippet_1 #navbarSupportedContent > ul > li {
    margin-right: 40px;
}
#header_snippet_1 #navbarSupportedContent > ul > li > a {
    padding: 0;
    text-transform: capitalize;
    font-weight: 600;
    color: #fff;
    transition: all .4s;
    position: relative;
    padding-bottom: 5px;
}
#header_snippet_1 #navbarSupportedContent > ul > li > a:before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    border: 1px solid var(--bs-warning);
    bottom: 0;
    opacity: 0;
}
#header_snippet_1 #navbarSupportedContent > ul > li > a.active,
#header_snippet_1 #navbarSupportedContent > ul > li > a:hover {
    color: var(--bs-warning);
}
#header_snippet_1 #navbarSupportedContent > ul > li > a.active:before,
#header_snippet_1 #navbarSupportedContent > ul > li > a:hover:before {
    opacity: 1;
}
#header_snippet_1 .icon ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
}
#header_snippet_1 .icon ul li {
    margin: 0 10px;
}
#header_snippet_1 .icon ul li a {
    color: #fff;
}
@media (max-width: 991px) {
    #header_snippet_1 #navbarSupportedContent {
        position: fixed;
        top: 0;
        left: 0;
        background: var(--bs-dark);
        width: 300px;
        height: 100% !important;
        display: block;
        opacity: 0;
        transition: all .4s;
        transform: translateX(-100%);
        padding-top: 10px;
    }
    #header_snippet_1 #navbarSupportedContent.show {
        opacity: 1;
        transform: translateX(0%);
    }
    #header_snippet_1 #navbarSupportedContent > ul > li {
        margin-right: 0;
        margin-bottom: 10px;
        padding: 5px 20px;
    }
    #header_snippet_1 .icon ul {
        padding: 10px 15px;
    }
    #close-btn {
        color: #000;
        font-size: 22px;
        position: absolute;
        right: -40px;
        top: 15px;
        cursor: pointer;
        z-index: 1;
        width: 40px;
        height: 40px;
        background: #ffc107;
        text-align: center;
        padding-top: 10px;
    }
    #header_snippet_1 #navbarSupportedContent > ul{
        overflow: auto;
        position: relative;
        height: 100%;
    }
}

JS

Width:

Height:

Enhance your website's user experience with this responsive Bootstrap 5 header design. Featuring a stylish logo, a well-organized navigation menu with dropdown functionality, and interactive icons for search, user profile, and shopping cart, this header provides both functionality and elegance. The design is optimized for mobile devices, with a collapsible menu that ensures a seamless navigation experience on any screen size. Perfect for businesses and personal sites looking to offer a professional and user-friendly interface.