Skip to main content

Responsive Navigation Menu Bar using only HTML & CSS

Responsive Navigation Menu Bar using only HTML & CSS

Responsive navigation menu bar plays an important role for every website. The navigation menu bar creates user satisfaction with the beauty of the website. The user needs a responsive navbar so that he can easily find the topic of his choice.

 I have designed many more types of menubars before. But in that case, I used JavaScript code to execute the menu button. I have not used any JavaScript or external JavaScript library for this design. I have created this Responsive Navigation menu bar using pure CSS and HTML code. I only used CSS code to make it responsive. I have made it responsive using only the @media function of CSS code.

Here I have basically used a logo and used five menu items. I have used the hover effect on the menu links. The background color will change when you click on those items or move the mouse.

Video Tutorial of Responsive Navigation Menu Bar

You can watch the video tutorial below to know how it works and how to make it.


How To Create a Responsive Navbar with HTML CSS

If you have learned how to create a navbar from the video above, you can download the necessary source codes. If you are a beginner, follow the tutorial below. In the following tutorial, I have shown you how to make it with a complete step-by-step image.

Step 1: Create navbar background

First of all, I designed the background of this navigation bar. Here the height: 80px and width: 100% of the background is used. I used black color in the background. You can use any other color if you want.

<nav>
 <!--menu button -->

 <!--logo -->

 <!-- Menu item -->

</nav>



*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
body{
  font-family: sans-serif;
}
nav{
  background: #000000;
  height: 80px;
  width: 100%;
}

Create navbar background

Step 2: Add a logo to the menu bar

Here I have created a logo with the help of text. In this case, you can use any image. However, I have easily created the logo using the text here. font-size: 33px has been used to make a slightly larger size. The text color I have used is white so that it can be clearly seen on a black background.


<label class="logo">Coding Home</label>


label.logo{
  color: white;
  font-size: 33px;
  line-height: 80px;
  padding: 0 20px;
  font-weight: bold;
}

Add a logo to the menu bar

Step 3: Create menu items as needed

Now I have added menu items using HTML code. Here I have used five menu items. You can increase or decrease the amount if you want. I have used the font-size: 17px and color white of the menu links.

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Portfolio</a></li>
</ul>


nav ul{
  float: right;
  margin-right: 10px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}
nav ul li a{
  color: white;
  font-size: 17px;
  padding: 15px 15px;
  border-radius: 3px;
  font-weight: 520;
  text-transform: uppercase;
}
a:hover{
  background: #414345;
  transition: .8s;
 
}

Create menu items as needed

Step 4: Create menu buttons for responsive devices

Now I will create a menu button for the Responsive device. As you can see above, all the menu items are hidden in the case of Responsive Devices. A menu button is available instead. When you click on that menu button, you will see all the menu items. 

This button was originally created using icons. I have used font-size: 30px and the color white to increase the size of that icon. I used float: right to keep it to the left. Here we have used display: none which will help to hide this button in general. Because it will be effective only in the case of responsive devices.


<input type="checkbox" id="check">
 <label for="check" class="checkbtn">
    <i class="fas fa-bars"></i>
 </label>


.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check{
  display: none;
}

Create menu buttons for responsive devices

Step 5: Make the navigation bar responsive with css

Using @media I made it suitable for Responsive Devices. Max-width: 935px is used here, which means that the following codes will be applied to devices with a screen size of less than 935px. 

Here display: block is used for checkboxes. As a result, we will see this menu button for devices below screen size 935 px.


@media (max-width: 935px){
  label.logo{
    font-size: 30px;
    padding-left: 50px;
  }
 
 
  .checkbtn{
    display: block;
  }
  ul{
    background: #1d1d1d;
    top: 80px;
    left: -100%;
    position: fixed;
    width: 100%;
    height: 100vh;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    padding: 15px 15px;
    line-height: 20px;
    display: block;
    margin: 20px 0;   
  }
  nav ul li:hover{
      background-color: rgb(48, 49, 51);
  }
  nav ul li a{
    font-size: 20px;
  }
  a:hover{
    background: none;
    color: #0082e6;
  }
  #check:checked ~ ul{
    left: 0;
  }
}

Make the navigation bar responsive with css

You can watch the video tutorial above to know more. I have created many more types of navigation menus before. 

Below is the download button with the help of which you can download the source code for this project. If there is a problem or the download button does not work, you can comment.





Tags

Comments

Post a Comment

Ask Me Anything ........

Popular Posts

Animated Progress Bar using Only HTML and CSS

Animated progress bar is mainly used in various business and personal web sites. css progress bar helps to organize your knowledge in a beautiful way. In this article, I am going to show you how to create an animated progress bar using only HTML and CSS code. I have made many other types of Progress Bar before but in that case, I have used JavaScript.  I have not used any JavaScript or external JavaScript library for this design. I created this Animated Progress Bar design using Pure HTML and CSS code. Skill bars are used on various websites to streamline the amount of experience, education, etc. with the help of animations. First of all, I have given the background-color: # 30336b of a web page. Then I made a small box here. I used four CSS Progress Bar in that box. The value of this bar will be zero when opening the page then gradually it will reach the pre-determined meaning. Video Tutorial of Pure CSS Progress Bar If you want to know how to make it better then you can watc
Post a Comment
Read more

Sidebar Menu Using Only HTML and CSS

This article shows you how to create sidebar menus using HTML and CSS code only. I have previously created many types of sidebars and navigation menubars using only HTML and CSS code so you can see those designs if you want.  Side Menubar A popular web element is currently used in the sidebar along with menubars on various websites. Undoubtedly the side menu bar is much more attractive and for this, the quality and beauty of the website are greatly enhanced. Under normal circumstances, I have completely hidden the menu bar on the web page.  There is a menu button that can be clicked to view the entire menu bar. There is also a cancel button which, when clicked, will completely hide the sidebar. In the sidebar, I have added links to various menu items, profile names, profile images, social media platforms.  First I gave the profile image and below that, I gave the profile name. Then I added some menu items here and added icons to each menu item. Then I created the buttons of fo
Post a Comment
Read more

Popup Login Form using Only HTML & CSS

In this article, I am going to show you how to create a pop-up login form using only HTML and CSS code. I have previously designed many more types of pop-up login forms , but in that case, I have used JavaScript. I did not use any JavaScript code in this design, only pure HTML and CSS code. In the case of this type of design, the complete login form is hidden. Instead, a button appears on which the complete login form can be viewed by clicking on it. One type of design is much more attractive than the usual login design and enhances the quality of the website a lot.  Like the normal form, it has everything here, namely the place to input the email ID and password and a login button. First I made a small button on the web page. Clicking on that button will show the complete login form.  There is a small cancel button in the login form which if clicked will hide the complete login form again. Video Tutorial of Popup Login Form If you want to know the complete step-by-step how I made
Post a Comment
Read more