Here, I build a responsive navigation bar for a e-commerce company with a dropdown menu using HTML, CSS and Javascript. The nav bar should have a top nav bar containing a favicon, company name, search bar and phone number. The bottom bar contains Home, About, Shop, Cart, contact and a login button. Shop is a dropdown item with a menu and a sub-menu. The dropdown list should be visible when a user hovers above the dropdown item. The dropdown list items should then close when the pointer moves away from the dropdown item or when the user clicks on the body of the page. The navigation bar should finally look this way:
You can find the full code at:https://github.com/BryanArapKoech/navbar-doublebar.
We start by first adding the fontawesome and remixicons links to the <head><head/> section as below.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Sportswear - Quality, affordable sportswear and equipment</title>
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
The basic structure of our body section is below. In the body section, we are building our navbar inside the <header></header> tag. The next step is building code for the top-navbar and then we can go to the building the bottom-navbar.
<body>
<!-- Double Navbar Structure -->
<header>
<!-- Top Navbar -->
<div class="top-navbar">
Add code here
</div>
<!-- Bottom Navbar -->
<div class="bottom-navbar">
Add code here
</div>
</header>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="./main.js"></script>
</body>
Building the top navbar
The Top navbar will have the components: the favicon with logo text, a search bar and phone. We now add the code to the top-navbar with the final code as:
<!-- Top Navbar -->
<div class="top-navbar">
<div class="top-navbar__content">
<section class="logo">
<a href="#" class="nav__logo">
<img src="./icons8-favicon-94.png" alt="logo" class="logo__img">
<span class="logo__text">Top Sportswear</span>
</a>
</section>
<section class="search">
<form action="https://www.google.com/search" method="get" class="search_bar">
<input type="text" placeholder="Search for any product..." name="search_product">
<button type="submit"><img src="./assets/icons/searchblack.svg" width="25" height="25" alt="search_icon"></button>
</form>
</section>
<!-- hamburger for mobile -->
<div class="hamburger" id="hamburger-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<section class="phone">
<i class="fa-solid fa-phone icon"></i>
+254(727)7383974
</section>
</div>
</div>
We give the contents of the top-navbar a class "top-navbar_content." For good code organization, we add inside the class a section of each of the components we want to add. We use an svg image for cleaner implementation and put the text next to in a <span><span/> with a class “logo_text" so that we can easily change its properties.
For the form section, we have used a dummy link https://www.google.com/search with the method “get” and class “search_bar.”
This is the code for the hamburger:
<!-- hamburger for mobile -->
<div class="hamburger" id="hamburger-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<section class="phone">
<i class="fa-solid fa-phone icon"></i>
+254(721)370738
</section>
</div>
</div>
We want the hamburger for screens of size <768pixels to be at the same level as the search bar, so we place it just above the phone section as:
<section class="phone">
<i class="fa-solid fa-phone icon"></i>
+254(727)7383974
</section>
Building the bottom navbar
The bottom bar has home, About Us (has a dropdown), shop (has a dropdown and dropdown sub-menu), cart, contact and login.
<!-- Bottom Navbar -->
<div class="bottom-navbar">
<div class="bottom-navbar__content">
<nav class="nav-container">
Add code here
</nav>
</div>
</div>
Inside the nav-container we add the code for the bottom-bar items. But first, we define a general structure. Here we use lists. For the The About us and Shop, there's more coding work to be done!! But the general of the bottom-navbar code structure is as below.
<!-- Bottom Navbar -->
<div class="bottom-navbar">
<div class="bottom-navbar__content">
<nav class="nav-container">
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li><a href="#" class="nav__link">Home</a></li>
<!-- About Us Dropdown -->
<li class="dropdown__item">
<div class="nav__link">
About Us <i class="ri-arrow-down-s-line dropdown__arrow"></i>
</div>
Add code here
</li>
<!-- Shop Dropdown -->
<li class="dropdown__item">
<div class="nav__link">
Shop <i class="ri-arrow-down-s-line dropdown__arrow"></i>
</div>
Add code here
</li>
<li><a href="#" class="nav__link">Cart</a></li>
<li><a href="#" class="nav__link">Contact</a></li>
<li><a href="#" class="btn">Login</a></li>
</ul>
</div>
</nav>
</div>
</div>
For the bottom navbar items with dropdowns, we give them a list class "dropdown__item" and then give the item text (i.e About us and Shop) a class name "nav__link".
Lets write code for the About Us section. For this, we create an unordered list (ul) inside the list (li) with the class "dropdown__menu".
<!-- Bottom Navbar -->
<div class="bottom-navbar">
<div class="bottom-navbar__content">
<nav class="nav-container">
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li><a href="#" class="nav__link">Home</a></li>
<!-- About Us Dropdown -->
<li class="dropdown__item">
<div class="nav__link">
About Us <i class="ri-arrow-down-s-line dropdown__arrow"></i>
</div>
<ul class="dropdown__menu">
<li>
<a href="#" class="dropdown__link">
<i class="ri-user-line"></i> Our Mission
</a>
</li>
<li>
<a href="#" class="dropdown__link">
<i class="ri-lock-line"></i> Our Vision
</a>
</li>
</ul>
</li>
<!-- Shop Dropdown -->
<li class="dropdown__item">
<div class="nav__link">
Shop <i class="ri-arrow-down-s-line dropdown__arrow"></i>
</div>
Add code here
</li>
<li><a href="#" class="nav__link">Cart</a></li>
<li><a href="#" class="nav__link">Contact</a></li>
<li><a href="#" class="btn">Login</a></li>
</ul>
</div>
</nav>
</div>
</div>
Next, lets write code for the Shop section. For this, we create an unordered list (ul) inside the list (li) with the class "dropdown__menu". this is the code in the context of the general structure:
<!-- About Us Dropdown -->
<li class="dropdown__item">
<div class="nav__link">
About Us <i class="ri-arrow-down-s-line dropdown__arrow"></i>
</div>
<ul class="dropdown__menu">
<li>
<a href="#" class="dropdown__link">
<i class="ri-user-line"></i> Our Mission
</a>
</li>
<li>
<a href="#" class="dropdown__link">
<i class="ri-lock-line"></i> Our Vision
</a>
</li>
</ul>
</li>
Now,
<!-- About Us Dropdown -->
<li class="dropdown__item">
<div class="nav__link">
About Us <i class="ri-arrow-down-s-line dropdown__arrow"></i>
</div>
<ul class="dropdown__menu">
<li>
<a href="#" class="dropdown__link">
<i class="ri-user-line"></i> Our Mission
</a>
</li>
<li>
<a href="#" class="dropdown__link">
<i class="ri-lock-line"></i> Our Vision
</a>
</li>
</ul>
</li>
<!-- Shop Dropdown -->
<li class="dropdown__item">
<div class="nav__link">
Shop <i class="ri-arrow-down-s-line dropdown__arrow"></i>
</div>
<ul class="dropdown__menu">
<li>
<a href="#" class="dropdown__link">Shoes</a>
</li>
<li>
<a href="#" class="dropdown__link">Fullsuit</a>
</li>
<!-- Equipment Submenu -->
<li class="dropdown__subitem">
<div class="dropdown__link">
Equipment <i class="ri-add-line dropdown__add"></i>
</div>
<ul class="dropdown__submenu">
<li>
<a href="#" class="dropdown__sublink">Balls</a>
</li>
<li>
<a href="#" class="dropdown__sublink">Nets</a>
</li>
<li>
<a href="#" class="dropdown__sublink">Bags</a>
</li>
<li>
<a href="#" class="dropdown__sublink">Cones</a>
</li>
<li>
<a href="#" class="dropdown__sublink">Ankle support</a>
</li>
<li>
<a href="#" class="dropdown__sublink">Leg sleeve</a>
</li>
</ul>
</li>
<li>
<a href="#" class="dropdown__link">Vests</a>
</li>
<li>
<a href="#" class="dropdown__link">Gloves</a>
</li>
<li>
<a href="#" class="dropdown__link">Jackets</a>
</li>
<li>
<a href="#" class="dropdown__link">Caps</a>
</li>
<li>
<a href="#" class="dropdown__link">Shorts</a>
</li>
<li>
<a href="#" class="dropdown__link">T-shirts</a>
</li>
<li>
<a href="#" class="dropdown__link">Socks</a>
</li>
</ul>
</li>
The overall code is for the navbar now is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Sportswear - Quality, affordable sportswear and equipment</title>
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Double Navbar Structure -->
<header>
<!-- Top Navbar -->
<div class="top-navbar">
<div class="top-navbar__content">
<section class="logo">
<a href="#" class="nav__logo">
<img src="./icons8-favicon-94.png" alt="logo" class="logo__img">
<span class="logo__text">Top Sportswear</span>
</a>
</section>
<section class="search">
<form action="https://www.google.com/search" method="get" class="search_bar">
<input type="text" placeholder="Search for any product..." name="search_product">
<button type="submit"><img src="./assets/icons/searchblack.svg" width="25" height="25" alt="search_icon"></button>
</form>
</section>
<!-- hamburger for mobile -->
<div class="hamburger" id="hamburger-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<section class="phone">
<i class="fa-solid fa-phone icon"></i>
+254(727)7383974
</section>
</div>
</div>
<!-- Bottom Navbar -->
<div class="bottom-navbar">
<div class="bottom-navbar__content">
<nav class="nav-container">
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li><a href="#" class="nav__link">Home</a></li>
<!-- About Us Dropdown -->
<li class="dropdown__item">
<div class="nav__link">
About Us <i class="ri-arrow-down-s-line dropdown__arrow"></i>
</div>
<ul class="dropdown__menu">
<li>
<a href="#" class="dropdown__link">
<i class="ri-user-line"></i> Our Mission
</a>
</li>
<li>
<a href="#" class="dropdown__link">
<i class="ri-lock-line"></i> Our Vision
</a>
</li>
</ul>
</li>
<!-- Shop Dropdown -->
<li class="dropdown__item">
<div class="nav__link">
Shop <i class="ri-arrow-down-s-line dropdown__arrow"></i>
</div>
<ul class="dropdown__menu">
<li>
<a href="#" class="dropdown__link">Shoes</a>
</li>
<li>
<a href="#" class="dropdown__link">Fullsuit</a>
</li>
<!-- Equipment Submenu -->
<li class="dropdown__subitem">
<div class="dropdown__link">
Equipment <i class="ri-add-line dropdown__add"></i>
</div>
<ul class="dropdown__submenu">
<li>
<a href="#" class="dropdown__sublink">Balls</a>
</li>
<li>
<a href="#" class="dropdown__sublink">Nets</a>
</li>
<li>
<a href="#" class="dropdown__sublink">Bags</a>
</li>
<li>
<a href="#" class="dropdown__sublink">Cones</a>
</li>
<li>
<a href="#" class="dropdown__sublink">Ankle support</a>
</li>
<li>
<a href="#" class="dropdown__sublink">Leg sleeve</a>
</li>
</ul>
</li>
<li>
<a href="#" class="dropdown__link">Vests</a>
</li>
<li>
<a href="#" class="dropdown__link">Gloves</a>
</li>
<li>
<a href="#" class="dropdown__link">Jackets</a>
</li>
<li>
<a href="#" class="dropdown__link">Caps</a>
</li>
<li>
<a href="#" class="dropdown__link">Shorts</a>
</li>
<li>
<a href="#" class="dropdown__link">T-shirts</a>
</li>
<li>
<a href="#" class="dropdown__link">Socks</a>
</li>
</ul>
</li>
<li><a href="#" class="nav__link">Cart</a></li>
<li><a href="#" class="nav__link">Contact</a></li>
<li><a href="#" class="btn">Login</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
Javascript code:
// Mobile Menu Toggle
const hamburger = document.getElementById('hamburger-menu');
const navMenu = document.getElementById('nav-menu');
hamburger.addEventListener('click', () => {
navMenu.classList.toggle('show-menu');
hamburger.classList.toggle('active'); // Add/remove active class for X shape
});
// Close menu when clicking outside
document.addEventListener('click', (e) => {
if (!hamburger.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.remove('show-menu');
hamburger.classList.remove('active'); // Remove active class when closing menu
}
});
The css code:
/* Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Top Navbar */
.top-navbar {
background-color: #f8f9fa;
padding: 10px 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.top-navbar__content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.logo {
display: flex;
align-items: center;
}
.logo__img {
height: 40px;
margin-right: 10px;
}
.logo__text {
font-weight: 700;
font-size: 1.25rem;
color: #2c3e50;
text-decoration: none; /* Remove underline */
}
.nav__logo {
text-decoration: none; /* Remove underline from the link */
display: flex;
align-items: center;
}
.search_bar {
display: flex;
align-items: center;
width: 400px;
max-width: 100%;
border: 1px solid #ddd;
border-radius: 50px;
overflow: hidden;
}
.search_bar input {
flex: 1;
padding: 10px 15px;
border: none;
outline: none;
}
.search_bar button {
background: transparent;
border: none;
padding: 8px 15px;
cursor: pointer;
}
.phone {
display: flex;
align-items: center;
font-weight: 600;
color: #2c3e50;
}
.phone .icon {
margin-right: 8px;
color: #3498db;
}
/* Bottom Navbar */
.bottom-navbar {
background-color: #2c3e50;
padding: 15px 0;
}
.bottom-navbar__content {
display: flex;
justify-content: center; /* Center the navigation */
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.nav-container {
width: 100%;
}
.nav__menu {
display: flex;
justify-content: center; /* Center the menu */
width: 100%;
}
.nav__list {
display: flex;
justify-content: center; /* Center the list items */
align-items: center;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
max-width: 800px; /* Limit the width for better centering */
}
.nav__link {
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: flex;
align-items: center;
font-weight: 500;
transition: color 0.3s;
}
.nav__link:hover {
color: #3498db;
}
.dropdown__arrow {
margin-left: 5px;
}
.dropdown__item {
position: relative;
}
.dropdown__menu {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background-color: #fff;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-radius: 5px;
padding: 10px 0;
list-style: none;
z-index: 100;
display: none;
}
.dropdown__item:hover .dropdown__menu {
display: block;
}
.dropdown__link {
display: flex;
align-items: center;
padding: 10px 20px;
color: #212121;
text-decoration: none;
transition: background-color 0.3s;
}
.dropdown__link:hover {
background-color: #f1f1f1;
color: #3498db;
}
.dropdown__subitem {
position: relative;
}
.dropdown__submenu {
position: absolute;
top: 0;
left: 100%;
min-width: 200px;
background-color:#fbf6f6;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-radius: 5px;
padding: 10px 0;
list-style: none;
display: none;
}
.dropdown__subitem:hover .dropdown__submenu {
display: block;
}
.dropdown__add {
margin-left: auto;
}
.dropdown__sublink {
display: block;
padding: 10px 20px;
color: #212121;
text-decoration: none;
transition: background-color 0.3s;
}
.dropdown__sublink:hover {
background-color: #f1f1f1;
color: #3498db;
}
.btn {
background-color: #3498db !important;
color: #fff;
padding: 10px 20px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #5a7c93;
}
.hamburger {
display: none;
flex-direction: column;
justify-content: space-between;
height: 20px;
width: 25px;
cursor: pointer;
position: relative;
}
/* Hamburger to X transformation */
.hamburger.active .bar:nth-child(1) {
transform: translateY(8.5px) rotate(45deg);
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8.5px) rotate(-45deg);
}
.bar {
width: 25px;
height: 3px;
background-color: #201414;
border-radius: 3px;
transition: transform 0.3s ease, opacity 0.2s ease;
}
/* Responsive */
@media (max-width: 995px) {
.nav__menu {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 100%;
background-color: #2c3e50;
transition: right 0.3s;
padding: 80px 20px 20px;
z-index: 90;
justify-content: flex-start;
}
.nav__menu.show-menu {
right: 0;
}
.bottom-navbar__content {
justify-content: space-between;
}
.nav__list {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.dropdown__menu, .dropdown__submenu {
position: static;
width: 100%;
box-shadow: none;
padding-left: 20px;
}
.hamburger {
display: flex;
z-index: 100;
}
.search_bar {
width: 250px;
}
.phone {
display: none;
}
.dropdown__link, .dropdown__sublink {
color: #fff;
}
.dropdown__link:hover, .dropdown__sublink:hover {
background-color: #34495e;
}
}
@media (max-width: 768px) {
.top-navbar__content {
flex-wrap: wrap;
position: relative;
}
.logo {
order: 1;
width: 100%;
margin-bottom: 10px;
justify-content: center; /* Center the logo */
}
/* phone below logo */
.phone{
order: 2;
width: 100%;
justify-content: center;
margin-bottom: 10px;
display: flex;
}
.search {
order: 3;
width: calc(100% - 50px); /* Make room for hamburger */
}
.search_bar {
width: 100%;
}
/* hamburger next to search bar */
.hamburger {
position: absolute;
bottom: 14px; /* Align with search bar */
right: 15px;
display: flex;
z-index: 100;
}
/* Change hamburger color to match theme */
.bar {
background-color: black;
}
/* Hide bottom navbar hamburger */
.bottom-navbar .hamburger {
display: none;
}
/* Hide phone number completely on small screens */
.phone {
display: none;
}
}
That is how to build a responsive double bar navigation bar!!
Full code at: You can find the full code at:https://github.com/BryanArapKoech/navbar-doublebar.
Top comments (0)