Responsive Bootstrap 5 Sticky Header with Dropdown and Search Box

Create a responsive sticky header with Bootstrap 5 that includes dropdown menus, a search box, and mobile-friendly navigation. Learn how to style and optimize your navigation bar.

HTML

<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">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#0">Pricing</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#0" id="navbarDropdownMenuLink" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            Dropdown link
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li><a class="dropdown-item" href="#0">Action</a></li>
                            <li><a class="dropdown-item" href="#0">Another action</a></li>
                            <li><a class="dropdown-item" href="#0">Something else here</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#0">Contact</a>
                    </li>
                </ul>                 
            </div>                
            <div class="serch_box">
                <div class="icon">
                    <i class="bi bi-search text-white"></i>
                </div>
                <div class="form">
                    <form class="d-flex m-0">
                        <input class="form-control" type="search" placeholder="Search" aria-label="Search">
                        <a class="btn btn-danger" type="submit"><i class="bi bi-search"></i></a>
                    </form>
                </div>
            </div>   
            <div class="contact_btn ms-4">
                <a href="#0" class="btn btn-danger">Contact Us</a>
            </div>
        </div>
    </nav>
</header>
<section>
    <img src="https://images.pexels.com/photos/691668/pexels-photo-691668.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" width="100%" alt="freewebsnippets">
</section>

CSS

#header_6{
    position: sticky;
    top: 0;
}
#header_6 nav{
    padding: 0;
    background-color: rgba(0, 0, 0, 0.7) !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#header_6 .collapse > ul > li{
    margin: 0 20px;
}
#header_6 .collapse > ul > li > a{
    padding: 0 !important;
    line-height: 65px;
    color: #fff;
}
#header_6 .navbar-nav .dropdown-menu{
    border-radius: 0;
    margin: 0;
}
@media (max-width: 991px){
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 300px;
        transition: all 0.4s ease;
        display: block !important;
        transform: translateX(-100%);
        opacity: 0;
        background-color: #000;
        height: 100%;
    }
    .navbar-collapse.collapsing {
        height: 100% !important;
        left: 0;
        transition: all 0.2s ease;
    }
    .navbar-collapse.show {
        transform: translateX(0%);
        opacity: 1;
    }
}
#header_6 .close-btn {
    position: absolute;
    top: 0px;
    right: -40px;
    font-size: 1.5rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: #dc3545;
    color: #fff;
    text-align: center;
    padding-top: 8px;
}
#header_6 .serch_box {
    position: relative;
    margin-left: 10px;
}
#header_6 .serch_box .form {
    display: none;
    position: absolute;
    right: 0;
    background: #1c1c1d;
    padding: 0;
    top: 50px;
}
#header_6 .serch_box .form input{
    min-width: 180px;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: #fff;
    box-shadow: none;
    padding: 10px 15px;
}
#header_6 .serch_box .form input::placeholder{
    color: #fff;
}
#header_6 .serch_box .form a.btn{
    border-radius: 0;
    padding: 0 15px;
    height: auto;
    display: flex;
    align-items: center;
}
#header_6 .serch_box .icon {
    cursor: pointer;
}
#header_6 .contact_btn a{
    border-radius: 0;
    padding: 10px 25px;
}
@media (max-width: 991px){
    #header_6 .serch_box,
    #header_6 .contact_btn{
        display: none;
    }
    #header_6 nav{
        padding: 15px 0;
    }
    #header_6 nav a.btn{
        border-radius: 0;
    }
    #header_6 .collapse > ul > li > a{
        line-height: 50px;
    }
    #header_6 .collapse{
        padding-top: 15px;
    }
#header_6 .collapse > ul.navbar-nav {
    overflow: auto;
    height: 100%;
}
}

JS

Width:

Height:

Creating a well-structured and responsive Bootstrap 5 sticky header is crucial for enhancing user experience and site navigation. A sticky header ensures that the navigation bar remains visible at the top of the page as users scroll, improving accessibility and functionality. In this tutorial, we will explore how to build a fully responsive header using Bootstrap 5, featuring a sticky navbar, dropdown menus, a search box, and a "Contact Us" button, all optimized for mobile devices.

Why Use a Sticky Header?

A sticky header is a fixed navigation bar that remains visible as the user scrolls through the page. This improves the website’s overall user experience, allowing visitors to quickly access important links without having to scroll back to the top. Implementing a Bootstrap 5 sticky navbar is a great way to keep key navigation elements like Home, Features, and Contact easily accessible.

Key Features of This Bootstrap 5 Sticky Header

This responsive navigation bar includes several important features that contribute to both functionality and design:

▹ Responsive Design: The navbar automatically adjusts its layout to accommodate smaller screens, ensuring a seamless experience across different devices.
▹ Dropdown Menus: The navigation bar includes dropdown menus for easy access to additional links.
▹ Search Box: A search icon toggles a hidden search box, enabling users to quickly search the website without taking up extra space in the header.
▹ Contact Us Button: A prominent "Contact Us" button encourages visitors to get in touch, which can increase user engagement and conversions.

Mobile-Friendly Navigation

One of the key elements of this Bootstrap 5 navigation bar is its mobile responsiveness. On smaller screens, the navbar transforms into a mobile-friendly design with a toggler button that reveals the navigation links. This ensures that the website is easy to navigate on any device, improving the overall mobile user experience.

To achieve this, the header uses Bootstrap's grid system and media queries to adjust the layout depending on the screen size. On larger screens, the navigation bar appears horizontally, while on smaller screens, the navigation links collapse into a vertical list that can be expanded with a click.

SEO Benefits of a Well-Designed Sticky Header

Having an optimized, user-friendly sticky navigation bar is not only beneficial for usability but also for SEO. Search engines reward websites that provide excellent user experiences, and a well-structured Bootstrap 5 header can contribute to better SEO rankings.

Using clean and semantic HTML, such as proper heading tags and descriptive text, makes your website more accessible to both users and search engines. Additionally, having key links like Home, Features, and Contact easily accessible in the header improves crawlability, helping search engines understand the structure of your site.

Conclusion

In conclusion, building a responsive Bootstrap 5 sticky header with dropdown menus and a search box is essential for creating a user-friendly and SEO-optimized website. By ensuring that the navigation bar is easily accessible on both desktop and mobile devices, you can improve user engagement and retention. This simple yet powerful header design offers a streamlined experience that enhances both usability and performance.

Click to More Header Design