Modern Dark Themed Bootstrap 5 Header Snippet with Icons and Navbar

Integrate this stylish dark-themed Bootstrap 5 header snippet featuring a responsive navbar, dropdown menus, and right-aligned icons for a sleek user interface.

HTML

<nav class="navbar navbar-dark navbar-expand-md bg-dark" id="header_4">
    <div class="container">
        <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>
        <a class="navbar-brand" href="#0">LOGO</a>
        <div class="right_menu">
            <ul>
                <li class="d-none d-md-block">
                    <a href="#0"><i class="bi bi-search"></i></a>
                </li>
                <li class="d-none d-md-block">
                    <a href="#0"><i class="bi bi-person"></i></a>
                </li>
                <li>
                    <a href="#0"><i class="bi bi-cart"></i><span class="number">0</span></a>
                </li>
                <li>
                    <a href="#0"><i class="bi bi-suit-heart"></i><span class="number">0</span></a>
                </li>
            </ul>
        </div>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
            <ul class="navbar-nav">
                <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">
                        Shop
                    </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">Contact</a>
                </li>
                <li class="nav-item d-block d-md-none"><hr style="border-color: #fff;" /></li>
                <li class="nav-item sign_in d-block d-md-none">
                    <a class="nav-link" href="#0">Sign In</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<section>
    <img src="https://images.pexels.com/photos/17889554/pexels-photo-17889554/free-photo-of-man-standing-on-mountain-in-back-lit.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" width="100%" alt="freewebsnippets">
</section>

CSS

#header_4 {
    background: #1e2835 !important;
}
#header_4 .navbar-brand {
    font-weight: 700;
    text-decoration: none;
    font-size: 34px;
    margin: 0;
}
#header_4 .right_menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}
#header_4 .right_menu ul li a {
    margin-left: 20px;
    color: #fff;
    font-size: 20px;
    position: relative;
}
#header_4 .right_menu ul li:first-child a {
    margin-left: 0;
}
#header_4 .right_menu ul li a span.number {
    border-radius: 12px;
    padding: 1px 6px;
    vertical-align: top;
    font-size: 0.625rem;
    position: absolute;
    top: -5px;
    right: -10px;
    display: inline-block;
    background: #fff;
    color: #000;
}
#header_4 ul li.nav-item > a {
    margin: 0 5px;
    text-transform: capitalize;
    font-weight: normal;
    letter-spacing: 0.5px;
    color: #fff;
    opacity: 0.8;
    font-weight: 500;
    transition: all 0.4s;
}
#header_4 ul li.nav-item > a.active,
#header_4 ul li.nav-item > a:hover {
    color: #0cf90c;
}
#header_4 ul li.nav-item .dropdown-menu {
    border-radius: 0;
    top: 140%;
    border-color: #e5e5e5;
}
.dropdown-item:active {
    background-color: #f8f9fa;
    color: #212529;
}
@media (min-width: 768px) {
    #header_4 .right_menu {
        order: 1;
    }
    #header_4 .navbar-collapse .navbar-nav {
        margin: 0 auto;
    }
}
@media (max-width: 767.9px) {
    #header_4 ul li.nav-item .dropdown-menu li a {
        color: #cbcbcb;
        font-weight: 500;
        background-color: transparent;
    }
    #header_4 ul li.nav-item .dropdown-menu {
        background: transparent;
        border: 0;
    }
    #header_4 .navbar-toggler:focus {
        box-shadow: none;
    }
}
@media (max-width: 576px) {
    #header_4 .navbar-brand {
        padding: 0;
        font-size: 28px;
    }
}

JS

Width:

Height:

This modern dark-themed Bootstrap 5 header snippet is designed with a responsive navbar, dropdown menus, and right-aligned icons for cart, Wishlist, and user account. Ideal for contemporary websites, it offers a sleek and functional design that adapts smoothly to various devices. Easily integrate it into your projects for a professional look.