Elegant Bootstrap 5 Header Snippet with Social Icons and Contact Details

Enhance your website with this elegant Bootstrap 5 header snippet featuring social icons, contact details, a responsive navbar, dropdown menus, and sign-up/login links.

HTML

<header id="header_5">
    <div class="fws_topbar">
        <div class="container">
            <div class="d-flex justify-content-between icon_part">
                <ul class="social d-flex align-items-center">
                    <li>
                        <a href="#0"><i class="bi bi-facebook"></i></a>
                    </li>
                    <li>
                        <a href="#0"><i class="bi bi-twitter"></i></a>
                    </li>
                    <li>
                        <a href="#0"><i class="bi bi-linkedin"></i></a>
                    </li>
                    <li>
                        <a href="#0"><i class="bi bi-instagram"></i></a>
                    </li>
                </ul>
                <ul class="d-flex align-items-center contact_detail">
                    <li>
                        <a href="#0" class=""><i class="bi bi-telephone-fill"></i> +(233)0123 225</a>
                    </li>
                    <li>
                        <a href="#0" class=""><i class="bi bi-envelope"></i> info@freewebsnippet.com</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-light navbar-expand-md bg-light">
        <div class="container">
            <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 ms-auto">
                    <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">Dropdown 1</a></li>
                            <li><a class="dropdown-item" href="#0">Dropdown 2</a></li>
                            <li><a class="dropdown-item" href="#0">Dropdown 3</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#0">Contact</a>
                    </li>
                    <hr />
                    <li class="nav-item signup">
                        <a class="nav-link" href="#0"><i class="bi bi-box-arrow-in-right"></i> Sign Up</a>
                    </li>
                    <li class="nav-item login">
                        <a class="nav-link" href="#0"><i class="bi bi-person-circle"></i> Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

CSS

#header_5 .fws_topbar{
     background-color: #02272e;
     padding: 20px 0;
}
 #header_5 .fws_topbar ul{
     margin: 0;
     padding: 0;
     list-style: none;
}
 #header_5 .fws_topbar ul li a{
     text-decoration: none;
     color: #fff;
}
 #header_5 .fws_topbar ul.social li a{
     margin-right: 20px;
     transition: all .4s;
}
 #header_5 .fws_topbar ul.social li:last-child a{
     margin-right: 0px;
}
 #header_5 .fws_topbar ul.contact_detail li a{
     margin-left: 20px;
     transition: all .4s;
}
 #header_5 .fws_topbar ul.contact_detail li:first-child a{
     margin-left: 0px;
}
 #header_5 .fws_topbar ul.social li a:hover, #header_5 .fws_topbar ul.contact_detail li a:hover{
     opacity: 0.8;
}
 #header_5 .navbar{
     background-color: #ebf6fb !important;
}
 #header_5 .navbar .navbar-brand{
     margin: 0;
     padding: 0;
     font-size: 40px;
     text-transform: uppercase;
     font-weight: 700;
     color: #333;
}
 #header_5 ul li.nav-item > a {
     margin: 0 10px;
     text-transform: capitalize;
     font-weight: normal;
     letter-spacing: 0.5px;
     color: #000;
     opacity: 0.8;
     font-weight: 500;
     transition: all .4s;
}
 #header_5 ul li.nav-item .dropdown-menu {
     border-radius: 0;
     top: 140%;
     border-color: #e7e7e7;
     background-color: #f5f5f5;
}
 #header_5 ul li.nav-item.signup > a{
     margin-right: 0px;
}
 @media (min-width: 768px){
     #header_5 .navbar-nav hr{
         border: 0;
         border-left: 1px solid #8e8e8e;
         opacity: 1;
         height: 20px;
         margin: auto 0;
    }
}
 @media (max-width: 767.9px){
     #header_5 .fws_topbar ul.contact_detail{
         display: none !important;
    }
     #header_5 .icon_part{
         justify-content: center !important;
    }
     #header_5 .fws_topbar{
         padding: 10px 0;
    }
     #header_5 ul li.nav-item .dropdown-menu{
         background-color: transparent;
         border: 0;
    }
}
 @media (max-width: 576px){
     #header_5 .navbar .navbar-brand{
         font-size: 30px;
    }
}

JS

Width:

Height:

This elegant Bootstrap 5 header snippet is perfect for modern websites, offering a sleek design with integrated social media icons and contact details. The header features a responsive navbar with dropdown menus, making it easy to navigate on all devices. The top bar provides quick access to your contact information, ensuring visitors can easily connect with you. Additionally, the header includes sign-up and login links for user convenience. With its stylish appearance and functional elements, this header snippet is an ideal choice for enhancing the user experience on your website. Integrate it effortlessly into your project for a professional look.