Build a Responsive Header with dropdown menu using HTML and CSS
A header is one of the most important components of a website, serving as the primary navigation hub for users. A well-designed responsive header can significantly enhance the user experience, providing easy access to key sections of the site and reinforcing the brand identity. Here we will guide you through creating a modern and responsive header using HTML, CSS.
Also Read: Build an Interactive Social Media Share Button using JavaScript
Headers are crucial for website navigation, typically containing the logo, navigation links and action buttons such as login and signup. In this tutorial, we'll show you how to build a stylish and functional header that adapts to different screen sizes, ensuring a consistent and user-friendly experience across all devices.
Setting Up the HTML Structure
We start by setting up the basic HTML structure for our navigation bar. The navigation bar consists of the following sections:
<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>Smart UI Studio</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>- The navigation bar contains a menu icon for mobile devices, the brand logo, navigation links, and action buttons for login and sign-up. The menu icon displays only on smaller screens, enhancing mobile usability.
- Navigation links provide easy access to different sections of the website, with dropdowns for detailed navigation. The action buttons for login and sign-up encourage user interaction and account creation.
- The dropdown menu offers additional navigation options under specific categories, ensuring users can access all necessary information.
Styling with CSS
The CSS styling ensures that the navigation bar is both functional and aesthetically pleasing. Key styling elements include:
@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;
}
}
- The navigation bar uses a grid layout for alignment and spacing. The menu icon is hidden on larger screens and displayed on smaller screens.
- The links change color on hover to provide visual feedback to the users. The dropdown menu is hidden by default and becomes visible when the user hovers over the Products link.
- Boxicons are used to add icons next to the navigation links and in the dropdown menu. Icons enhance the visual appeal and make the navigation options more intuitive.
- The header is designed to be responsive, ensuring it looks great on all devices. Media queries are used to adjust the layout for smaller screens.
This modern header template seamlessly integrates HTML, CSS and Boxicons to deliver a functional and aesthetically pleasing navigation area. The combination of these technologies ensures that the header is not only visually appealing but also highly functional, providing users with an intuitive and enjoyable browsing experience. The use of Boxicons adds a contemporary touch, making the navigation elements easily recognizable and enhancing the overall design.
Also Read: Create an Expandable Sidebar Menu using HTML CSS and JS
This header template is a robust solution for creating a professional and engaging header for any web project. Its blend of modern design elements, responsive features and user-friendly structure makes it an excellent choice for developers looking to enhance their websites. By using this template, you can ensure that your website not only looks great but also offers a seamless and enjoyable user experience, ultimately contributing to the success of your online presence.
