Responsive Top Navigation Menu with HTML and CSS

Responsive Top Navigation Menu with HTML and CSS

This tutorial will help you to know how to create a Responsive Top Navigation Menu bar. The navigation menu is an important element for any website. We see Responsive Top Navbar on different websites. Which helps to keep the various important links of the website beautifully arranged.

If you are a beginner and want to know how to create a menu on top navigation then this tutorial will help you a lot. Here I have only used HTML, CSS, and very little JavaScript. 

We see side menubars, full-page menubars, and stick menubars on different websites. However, the navbar is the most used.

Responsive Top Navigation Menu

It is very simple and is made up of only a few links and a logo. However, the bar on this CSS has been made fully responsive. This allows you to use it directly on any website or project. 

In this tutorial, you will find the necessary information, source code, and video tutorial. No dropdown was used in this design. If you want to add a dropdown to this navigation bar you can see the other designs I made.




As you can see above, this is simple navigation created by HTML and CSS. First, the basic structure of the bar has been created. Its height is 70 px and its width is 100%. I used blue color in the background. You can use another color if you want.

First, a logo was used. I used text to create this logo. You can use the image here if you want. Then I used five menu items. Different hover effects have been added to each item.

How To Create a Top Navigation Bar

In the case of responsive devices, these menu items are completely hidden. A menu button can be found instead. When you click on that button, all the menu items can be seen below.

I have used 4 line javascript to execute this menu button. Now is the time to create this Responsive Top Navigation Menu. For this, you need to have some idea about HTML and CSS. The rest I will try to explain to you in this tutorial.

1. Basic structure of navbar

The basic structure of this navigation bar has been created using the following HTML and CSS codes. This navbar uses width: 100%, height: 70px and background color blue. 

This number is used top: 0 to keep it at the top and position: fixed to keep it fixed in a certain place.

<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 navbar

2. Add logo in the navigation

I have created a logo using the code below. I added text to create the logo. Font-size: 26px and its color white has been used to increase the size of the text.

<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;
}

Add logo in the navigation

3. Add menu item in Top Navigation

Now I have added the menu items. Here I have used five menu items. Padding: 0 15px is used to keep distance between each item and font-size: 19px is used to increase the text size a bit.

<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;
}

Add menu item in Top Navigation

The links below are designed with the help of CSS. I used text-decoration: none to hide the underline between these links, and the color was white.

nav ul li a {
 text-decoration: none;
 color: white;
}

nav ul li a:hover{
 color: #09eff3;
}

Top Navigation Menu

4. Menu Button for Responsive Devices

Now the menu button has been created. I have used font-size: 20px to increase the width: 80px, height: 40px and text size of this button. Has used display: none here so this button cannot be seen under normal conditions.

<button><span>MENU <i class="fas fa-bars"></i></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;
}

5. Make the menu bar responsive using CSS

Made the navigation bar fully responsive using the following codes. It is very important to be responsive in a navigation bar. I have made it a response by using some amount of CSS here. The following codes will work when you open this CSS top navigation using a small device like mobile.

First I used display: block to make the button visible. I used display: none as you can see above. For which the button was hidden. Now using display: block the button will be seen in the case of a responsive device. 

With each menu item is designed. Display: none is used in the menu item here. As a result, menu items cannot be found here.

@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 menu bar responsive using CSS

6. Activate the Menu button with JavaScript

Now, this menu button has been implemented using some amount of JavaScript. First, the constants of the two HTML functions are determined. Because we can't use any HTML element directly in JavaScript.

let btn = document.querySelector("button");
let ul = document.querySelector("ul");

Below I have indicated that when you click on that menu button "show" will be added to the menu items. I have already added the value of "show" to CSS. 

Clicking on the menu button will add that ".show {display: block;" to the menu item so that the menu items can be seen.

 btn.onclick = function() {
    ul.classList.toggle("show");
 }


Responsive Top Navigation Menu

Hopefully from this tutorial, you have learned how to create this Responsive Navigation menu bar using HTML and CSS. 

Earlier I shared with you the tutorials of different types of top navigation bars. Be sure to comment on how you like this simple and responsive top navbar.






Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more