Every modern website needs a clean and responsive header navigation bar (navbar). In this tutorial, we’ll build a responsive header navigation bar with dropdown menus using only HTML and CSS. This navbar includes a logo, navigation links, dropdown menu and login/signup buttons. It’s also responsive, so the menu adapts to smaller screens with a mobile-friendly menu icon.
HTML Section
We start by structuring the HTML markup for the responsive header and navbar:
<header>
<nav class="nav-bar">
<div class="menu-icon bx bx-menu"></div>
<div class="logo"><a href="#"> <span class="icon bx bx-code-alt"></span>CodeWebStack</a></div>
<ul class="nav-link-list">
<li class="item"><a href="#"><span class="icon bx bx-home"></span>Home</a></li>
<li class="item"><a href="#"><span class="icon bx bx-layer"></span>Templates</a></li>
<li class="item"><a href="#"><span class="icon bx bx-dollar"></span>Pricing</a></li>
<li class="item has-drop-down">
<a href="#"><span class="icon bx bx-package"></span>Products</a>
<ul class="drop-down">
<li>
<a href="#">
<div class="icon bx bx-lock"></div>
<p class="name">Security Software</p>
<p class="addon">Protects your data securely</p>
</a>
</li>
<li>
<a href="#">
<div class="icon bx bx-cog"></div>
<p class="name">Productivity Tools</p>
<p class="addon">Enhance your work efficiency</p>
</a>
</li>
<li>
<a href="#">
<div class="icon bx bx-data"></div>
<p class="name">Database</p>
<p class="addon">Organize and manage information</p>
</a>
</li>
<li>
<a href="#">
<div class="icon bx bx-shield-quarter"></div>
<p class="name">Simulators</p>
<p class="addon">Create realistic model scenarios</p>
</a>
</li>
<li>
<a href="#">
<div class="icon bx bx-exclude"></div>
<p class="name">Limited Edition</p>
<p class="addon">Exclusive and rare items</p>
</a>
</li>
<li>
<a href="#">
<div class="icon bx bx-command"></div>
<p class="name">Developer Tools</p>
<p class="addon">Tools for coding and development</p>
</a>
</li>
</ul>
</li>
<li class="item"><a href="#"><span class="icon bx bx-book"></span>Docs</a></li>
</ul>
<div class="btns-wrapper">
<a class="nav-login" href="#">Login</a>
<a class="nav-signup" href="#">Sign up</a>
</div>
</nav>
</header>- Header & Nav Bar – A
<header>contains the main<nav>element. - Logo Section – Displays the website’s name with an icon.
- Navigation Links – Includes menu items such as Home, Templates, Pricing and a dropdown menu under Products.
- Dropdown Menu – Built using nested
<ul>inside.has-drop-down. Each item has an icon, a title and a short description. - Action Buttons – Login and Sign-up buttons on the right.
- Mobile Menu Icon – A hamburger icon that appears when the screen size is smaller.
This semantic structure keeps the navbar organized and makes it accessible across all devices. In short, the HTML provides the skeleton for a responsive, feature-rich navigation bar.
CSS Section
The CSS styling brings the navigation bar to life with a modern, sleek design:
@import url(https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400&display=swap);
@import url(https://cdnjs.cloudflare.com/ajax/libs/boxicons/2.1.0/css/boxicons.min.css);
body {
display: flex;
width: 100%;
color: white;
font-family: "Baloo Bhai 2";
}
ul {
list-style: none;
}
header {
background: #292929;
width: 100%;
height: 60px;
}
.nav-bar {
gap: 30px;
height: 100%;
width: 100%;
margin: auto;
display: grid;
padding: 0 15px;
max-width: 1200px;
align-items: center;
grid-template-columns: auto 1fr auto;
}
.nav-bar a {
color: white;
display: flex;
height: 100%;
align-items: center;
text-decoration: none;
}
.menu-icon {
font-size: 32px;
display: none;
}
.logo {
font-size: 20px;
font-weight: 700;
letter-spacing: .5px;
width: fit-content;
white-space: nowrap;
}
.logo .icon {
font-size: 20px;
padding: 5px;
background: #25beb0;
border-radius: 5px;
margin-right: 15px;
}
.nav-link-list {
display: flex;
gap: 25px;
height: 100%;
font-size: 17px;
}
.item {
position: relative;
}
.item:hover>a,
.drop-down a:hover,
.drop-down a:hover .icon {
color: #25beb0;
}
.item::before {
content: '';
width: 100%;
position: absolute;
display: block;
transform: scaleX(0);
left: 0;
height: 3px;
transition: transform .3s;
bottom: 0;
background-color: #25beb0;
transform-origin: center;
}
.item:hover::before {
padding: 0 2px;
transform: scaleX(1);
}
.nav-link-list .icon {
vertical-align: middle;
margin-right: 4px;
font-size: 15px;
}
.has-drop-down>a::after {
content: "\ea4a";
font-family: 'boxicons';
font-size: 20px;
vertical-align: middle;
}
.drop-down {
position: absolute;
visibility: hidden;
opacity: 0;
top: 60px;
display: grid;
gap: 30px 15px;
padding: 15px;
left: 0;
width: 550px;
transform: scaleY(0);
transition: transform .3s;
background-color: #292929;
border-radius: 0 0 5px 5px;
transform-origin: center top;
justify-content: space-between;
grid-template-columns: repeat(2, auto);
}
.has-drop-down:hover .drop-down {
visibility: visible;
opacity: 1;
transform: scaleY(1);
}
.drop-down a {
display: grid;
grid-template-areas: "icon name"
"icon addon";
align-items: center;
grid-template-columns: auto 1fr;
gap: 0px 10px;
overflow: hidden;
}
.drop-down .icon {
grid-area: icon;
font-size: 22px;
padding: 10px;
color: #c2c2c2;
border-radius: 5px;
background: #353535;
}
.addon {
color: #7e7e7e;
font-size: 13px;
line-height: 1.2;
}
.btns-wrapper {
display: flex;
gap: 15px;
}
.btns-wrapper a {
padding: 2px 15px;
border-radius: 5px;
}
.nav-login {
border: 1px solid #ffffff8a;
transition: background-color .2s;
}
.nav-login:hover {
color: black;
font-weight: 700;
background-color: white;
}
.nav-signup {
font-weight: 700;
letter-spacing: .5px;
background-color: #25beb0;
text-shadow: 1px 0px 2px #00000029;
}
.nav-signup:hover {
background-color: #12887e;
}
@media screen and (max-width:1100px) {
.nav-link-list {
display: none;
}
.menu-icon {
display: block;
}
.nav-bar {
gap: 10px;
}
}
@media screen and (max-width:450px) {
.btns-wrapper {
display: none;
}
}- Navigation Links
- The
.nav-link-listusesflexfor a horizontal layout. Each.itemhighlights on hover with a colored underline animation (transform: scaleX(1)). - Boxicons are used for consistent icons across links.
- The
- Dropdown Menu
- The
.drop-downis hidden by default. On hover, it becomes visible with a smooth dropdown effect. - Each dropdown item uses a grid layout. Hover effects change the icon and text color for interactivity.
- The
- Responsive Design
- At 1100px and below, the main navigation links are hidden and replaced with the hamburger menu.
- At 450px and below, the login and signup buttons are hidden for space-saving.
In short, the CSS ensures the navbar is elegant, interactive and adaptive to all screen sizes.
Wrap-Up
This responsive header navigation bar with dropdown menu is built with just HTML & CSS and it’s already fully functional for desktop users. By adding a small amount of JavaScript, you can make the menu mobile-friendly too.
With a professional design, smooth hover effects and a well-structured dropdown, this responsive header navbar is perfect for any website — from business platforms to personal portfolios.
