Responsive Top Navigation Menu Bar with HTML CSS

Responsive Top Navigation Menu Bar with HTML CSS

In this article, you will learn how Responsive Top Navigation Menu Bar is created using HTML and CSS. Earlier I designed many more types of menubars.

The beauty and quality of a website depend a lot on the navigation bar. All types of site content can be nicely stored in this navbar. As a result, the user will be able to find the information he needs very easily and quickly. 

Responsive Top Navigation Menu Bar with HTML CSS

Responsive Top Navigation Menu Bar using HTML CSS

Every website uses a menu bar. However, some sites now use the sidebar menu. Earlier I showed you how to create a sidebar menu. I used HTML and CSS to create this design. @media of CSS has helped to make it fully responsive.  

This is a very simple project. First I created this basic structure. Then I added a title. Then I added five menu items here. If you want to add a dropdown with these items. Then you can see another design made by me. We have made it responsive so that the design looks beautiful on all devices. Follow the step-by-step tutorial below to create this design.

Step 1: Basic structure of Navigation Menu

I have created the basic structure of this navigation using the HTML and CSS code below. Navbar height: 70px and background color blue. You can use any other color instead of this blue color.

<nav>
</nav>
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }
    
 body {
    
    font-family: sans-serif;
  }
    
 nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px;
    background-color: #0479df;
  }
Basic structure of Navigation Menu

Step 2: Create a logo in the navbar

Has now created a logo in the menu bar. I used text to create the logo here. I have added font-size: 26px to increase the text size a bit.

 <a href=”#” class=”logo”>Mystery Code</a>
 .logo {
    font-family: sans-serif;
    font-weight: bolder;
    font-size: 26px;
    color: white;
    text-decoration: none;
    line-height: 70px;
    margin-left: 20px;
    }
Create a logo in the navbar

Step 3: Add menu item in Top Navigation

Now I have added the menu items to the menu bar. Added five menu items here. However, you can add menu items of your choice. Here the font size of the menu item: 26px and padding: 0 15px is used to maintain some distance between each item.

<ul>
   <li><a href=”#”>Home</a></li>
   <li><a href=”#”>Services</a></li>
   <li><a href=”#”>About us</a></li>
   <li><a href=”#”>Portfolio</a></li>
   <li><a href=”#”>Contact us</a></li>
</ul>
 nav ul {
    float: right;
    background-color: #0479df;
  }
    
 nav ul li {
    font-family: sans-serif;
    display: inline-block;
    font-size: 19px;
    line-height: 70px;
    padding: 0 15px;
  }
    
 nav ul li a {
   text-decoration: none;
   color: white;
 }
 nav ul li a:hover{
   color: #09eff3;
 }
Add menu item in Top Navigation

Step 4: Create menu button for Responsive device

Above we designed it for the desktop. Now you have to add some elements in it which will be useful for mobile or small devices.

Now I have created a menu button which can be seen mainly in the case of mobile. In the case of mobile, all the menu items will be hidden and this menu button will be available instead. When you click on this menu button, you will see all the menu items.

<button><span>MENU</span></button>
 button {
   position: absolute;
   top: 50%;
   right: 20px;
   outline: none;
   border: 1px solid #eae2e2;
   color: white;
   transform: translateY(-50%);
   background-color: transparent;
   width: 80px;
   height: 40px;
   font-size: 20px;
   font-weight: bolder;
   display: none;
 }
Create menu button for Responsive device

I have used the JavaScript below to execute that button.

 let btn = document.querySelector(“button”);
 let ul = document.querySelector(“ul”);
   btn.onclick = function() {
      ul.classList.toggle(“show”);
     }

Step 5: Make the Top Navigation Menu Bar Responsive

Now I have made this top navigation menu bar responsive using CSS. In the case of desktops, menu items can be seen side by side.

 @media (max-width:738px) {
    
  button {
     display: block;
    }
    
  nav ul {
     position: absolute;
     top: 70px;
     width: 100%;
     display: none;
     padding-top: 20px;
     padding-bottom: 20px;
     padding-left: 10px;
     background: #014d90;
     border-top: 1px solid #000;
    }
    
  nav ul li {
     display: block;
     text-align: center;
    }
    
  .show {
    display: block;
    }
  }
Make the Top Navigation Menu Bar Responsive

Hopefully from this tutorial, you have learned how to create responsive top navigation menus using HTML and CSS. You can check out this article if you want to add a dropdown to this design. You can definitely comment on how you like the article.

If you have any problems creating the Top Navigation Menu, you can ask directly on Instagram(@foolishdeveloper).