How To Create a Responsive Navbar with dropdown Using HTML & CSS
How To Create a Responsive Navbar with dropdown Using HTML & CSS
A responsive navigation bar is an important section of every modern website. This Responsive Navigation Bar with Dropdown Menu is built using HTML and CSS to create a professional navigation system with responsive layouts, smooth hover effects, and elegant dropdown menus. The design is lightweight, fast-loading, and works perfectly across desktops, tablets, and mobile devices, making it suitable for business websites, portfolios, blogs, educational websites, and modern web applications.
This project uses HTML for structure of navbar and CSS to create responsive layouts, dropdown menus, hover animations, transitions, and modern styling without using JavaScript. It is an excellent learning project for beginners who want to master responsive navigation using pure CSS, while developers and freelancers can easily customize the template and integrate it into client websites for a professional navigation experience.
Responsive Navigation Bar with Dropdown Menu:
A Responsive Navigation Bar with Dropdown Menu is a website menu that automatically adjusts to different screen sizes while allowing users to access additional navigation links through expandable dropdown menus. Instead of displaying all links at once, dropdown menus organize related pages into categories, creating a cleaner interface and improving the overall user experience. In this project, HTML is used to create semantic navigation elements such as <nav>, <ul>, <li>, <a>, and <div>, while CSS is responsible for designing the responsive layout, hover effects, dropdown positioning, animations, typography, spacing, and color styling.
The dropdown functionality is created entirely with CSS using hover selectors, positioning, transitions, and responsive media queries, eliminating the need for JavaScript. The navigation bar remains lightweight, responsive, and easy to customize while delivering smooth interactions across desktops, laptops, tablets, and smartphones. The clean code structure allows you to modify menu items, colors, fonts, spacing, icons, and branding according to your project requirements.
This project is perfect for beginners learning HTML and CSS through practical examples and is equally useful for students, freelancers, UI designers, and professional developers looking for a reusable responsive navigation bar template. It can be integrated into portfolios, business websites, educational platforms, blogs, corporate websites, or other responsive web applications with minimal customization.
Steps to Create a Responsive Navigation Bar with Dropdown Menu:
Follow these simple steps to build a responsive navigation bar with dropdown menus using HTML and CSS:
- Create a project folder and name it responsive-navbar-dropdown-menu.
- Inside the project folder, create two files named index.html and style.css.
- Build the navigation bar structure using semantic HTML elements such as
<nav>,<ul>,<li>,<a>, and<div>. - Add navigation links and organize related pages into dropdown menu sections.
<nav class="navbar">
<div class="nav-container">
<div class="logo"><img src="tpslogo.jpg" alt="" width="50px"></div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown"><a href="#">Services </a>
<ul class="dropdown-menu">
<li><a href="#">Web Development</a></li>
<li><a href="#">UI/UX Development</a></li>
<li><a href="#">SEO Optimization</a></li>
<li><a href="#">Digital Marketing</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Portfolio </a>
<ul class="dropdown-menu">
<li><a href="#">Projects</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Clients</a></li>
</ul>
</li>
<li><a href="#">Contacts</a></li>
<li><a class="nav-btn" href="#">Get Started</a></li>
</ul>
</div>
</nav>
<section class="hero">
<div class="content">
<h1>Modern Navigation Bar</h1>
<p>Reponsive navigation bar with smooth dropdown menu, elegant blue gradient theme, modern hover effects, and professional layout using pure HTML & CSS.</p>
</div>
</section>
Apply custom CSS styling to design the navigation bar, typography, spacing, colors, and overall layout. Create smooth hover dropdown effects using CSS selectors, positioning, and transition animations. Use CSS media queries to make the navigation bar fully responsive across desktops, tablets, and mobile devices. Save the project files and open index.html in your browser to test the final responsive navigation bar with dropdown menus.
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #f4f7fb;
overflow-x: hidden;
}
/* Navbar */
.navbar{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
backdrop-filter: blur(12px);
background: rgba(15,23,42,0.75);
border-bottom: 1px solid rgba(255,255,255,0.08);
padding: 0 40px;
transition: 0.5s ease;
}
.nav-container{
max-width: 1200px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
}
/* logo */
.logo img{
border-radius: 12px;
cursor: pointer;
transition: 0.3s;
}
.logo img:hover{
transform: scale(1.08);
}
/* nav links */
.nav-links{
list-style: none;
display: flex;
align-items: center;
gap: 35px;
}
.nav-links li{
position: relative;
}
.nav-links a{
text-decoration: none;
color: #fff;
font-size: 16px;
font-weight: 500;
transition: .5s ease;
position: relative;
}
/* underline wave */
.nav-links a::after{
content: "";
position: absolute;
width: 0%;
height: 2px;
left: 0;
bottom: -6px;
background: #00d4ff;
transition: 0.4s;
}
.nav-links a:hover::after{
width: 100%;
}
.nav-links a:hover{
color: #00d4ff;
}
/* dropdown */
.dropdown-menu{
position: absolute;
top: 55px;
left: 0;
width: 240px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.18);
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: 0.35s ease;
}
.dropdown-menu li{
list-style: none;
}
.dropdown-menu a{
display: block;
padding: 15px 20px;
color: #1e293b;
font-weight: 500;
transition: 0.3s;
}
.dropdown-menu a:hover{
background: #eff6ff;
color: #2563eb;
padding-left: 28px;
}
.dropdown:hover .dropdown-menu{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* button */
.nav-btn{
background: linear-gradient(135deg,#00d4ff,#2563eb);
color: #fff !important;
padding: 12px 24px !important;
border-radius: 40px;
font-weight: 600;
box-shadow: 0 10px 25px rgba(37,99,235,0.3);
transition: 0.4s ease !important;
}
.nav-btn:hover{
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(37,99,235,0.45);
}
.nav-btn::after{
display: none;
}
/* hero section */
.hero{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
background: linear-gradient(rgba(0,0,0,0.1) , rgba(0,0,0,0.3)) , url(banner.jpg);
background-size: cover;
background-position: center;
position: relative;
}
.content{
max-width: 800px;
padding: 50px;
border-radius: 24px;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.1);
animation: fadeup 1s ease;
}
.hero h1{
font-size: 50px;
color: #fff;
margin-bottom: 25px;
line-height: 1.2;
}
.hero p{
font-size: 18px;
color: #e2e8f0;
line-height: 1.9;
}
/* animations */
@keyframes fadeup {
from{
opacity: 0;
transform: translateY(40px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
/* responsive */
@media (max-width:768px) {
.navbar{
padding: 0 20px;
}
.nav-container{
flex-direction: column;
height: auto;
padding: 20px 0;
}
.nav-links{
flex-direction: column;
width: 100%;
gap: 20px;
margin-top: 20px;
}
.dropdown-menu{
position: static;
width: 100%;
margin-top: 12px;
opacity: 1;
visibility: visible;
transform: none;
display: none;
}
.dropdown:hover .dropdown-menu{
display: block;
}
.hero h1{
font-size: 42px;
}
.content{
padding: 30px;
}
}
</style>
