Create Responsive Navigation Bar with Dropdown in CSS

To create a responsive navigation bar, the media queries are used. Media Queries is used when you need to set a style to different devices such as tablet, mobile, desktop, etc. The navigation bar with dropdown looks like the following. The dropdown menu is having Contact Us, Visit Us, and About Us sub-menus −

Style the Navigation Menu and Links

The background color of the navigation menu are set here, with the links. The menu links are set with the display property inline-block. It displays an element as an inline-level block container −

nav{
   background-color: #017575;
   width: 100%;
}
.links,.links-hidden{
   display: inline-block;
   color: rgb(255, 255, 255);
   text-decoration: none;
   font-size: 18px;
   font-weight: bold;
   padding: 20px;
}

Menu Links

The following are our menu links −

<a class="links" href="#">HOME</a>
<a class="links" href="#">EMPLOYEES</a>
<a class="links" href="#">CAREER</a>
<a class="links" href="#">Our History</a>
<a class="links" href="#">Fund Us</a>
<a class="links" href="#">More Info</a>

Dropdown Menu Link

The following is the menu link Others that is to be set as dropdown −

<div class="dropdown-menu">
   <button class="menu-btn">Others <</button>
   <div class="menu-content">
      <a class="links-hidden" href="#">Contact Us</a>
      <a class="links-hidden" href="#">Visit Us</a>
      <a class="links-hidden" href="#">About Us</a>
   </div>
</div>

Styling the Dropdown Link

This is how the dropdown menu is styled −

.dropdown-menu:hover .menu-content {
   display: block;
}
.dropdown-menu:hover .menu-btn {
   background-color: #3e8e41;
}

Hamburger Menu

The hamburger menu are three stacked lines. It is set for responsiveness, when the browser size is reduced i.e. appears on tablets and mobiles −

<a class="hamburger">?</a>

Media Queries for Responsiveness

The following is set for tablet and mobile view −

@media screen and (max-width: 880px) {
   nav a:not(:first-child) {
      display: none;
   }
   nav a.hamburger {
      float: right;
      display: block;
      padding: 12px;
   }
   .dropdown-menu{
      display: none;
   }
   nav.openNav a.hamburger {
      position: relative;
   }
   nav.openNav a {
      float: none;
      display: block;
      text-align: center;
   }
}

Example

The following is the code to create a responsive navigation bar with dropdown −

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
      *,*::after,*::before{
         box-sizing: border-box;
      }
      .menu-btn {
         font-size: 18px;
         font-weight: bold;
         display: inline-block;
         text-align: center;
         background-color: #040008;
         color: white;
         padding: 20px;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         border: none;
         width: 100%;
      }
      .dropdown-menu {
         position: relative;
         display: inline-block;
      }
      .menu-content {
         display: none;
         position: absolute;
         width: 100%;
         background-color: #017575;
         min-width: 160px;
         z-index: 1;
      }
      nav{
         background-color: #017575;
         width: 100%;
      }
      .links,.links-hidden{
         display: inline-block;
         color: rgb(255, 255, 255);
         text-decoration: none;
         font-size: 18px;
         font-weight: bold;
         padding: 20px;
      }
      .links-hidden:hover,.links:hover {
         background-color: rgb(8, 107, 46);
      }
      .dropdown-menu:hover .menu-content {
         display: block;
      }
      .dropdown-menu:hover .menu-btn {
         background-color: #3e8e41;
      }
      .hamburger {
         color: white;
         font-weight: bolder;
         display: none;
      }
      @media screen and (max-width: 880px) {
         nav a:not(:first-child) {
            display: none;
         }
         nav a.hamburger {
            float: right;
            display: block;
            padding: 12px;
         }
         .dropdown-menu{
            display: none;
         }
         nav.openNav a.hamburger {
            position: relative;
         }
         nav.openNav a {
            float: none;
            display: block;
            text-align: center;
         }
      }
      nav.openNav div.dropdown-menu{
         display: block;
         width: 100%;
      }
   </style>
</head>
<body>
   <nav>
      <a class="links" href="#">HOME</a>
      <a class="links" href="#">EMPLOYEES</a>
      <a class="links" href="#">CAREER</a>
      <a class="links" href="#">Our History</a>
      <a class="links" href="#">Fund Us</a>
      <a class="links" href="#">More Info</a>
      <div class="dropdown-menu">
         <button class="menu-btn">Open <</button>
         <div class="menu-content">
            <a class="links-hidden" href="#">Contact Us</a>
            <a class="links-hidden" href="#">Visit Us</a>
            <a class="links-hidden" href="#">About Us</a>
         </div>
      </div>
      <a class="hamburger">?</a>
   </nav>
   <script>
      var x = document.getElementsByTagName("nav")[0];
      function toggleNav() {
         if (x.className === "") {
         x.className = " openNav";
         }
         else {
            x.className = "";
         }
      }
      document.querySelector(".hamburger").addEventListener("click", toggleNav);
   </script>
</body>
</html>
Updated on: 2023-10-27T11:28:14+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements