Responsive Navigation Menu Bar in HTML CSS

88
Responsive Navigation Menu Bar in HTML CSS

Hey friends, today in this blog you’ll learn how to create a Fully Responsive Navigation Menu Bar using only HTML & CSS. In the earlier blog, I shared how to create a Responsive Sidebar Menu using HTML & CSS and now it’s time to create a navigation bar in HTML.

As you know the Menu Bar or Navigation Bar (Navbar) is important for any kind of website. Many websites have a responsive navbar or a responsive navbar with a dropdown menu. Essentially, responsive design is a way to put together a website so that it automatically scales its content and elements to match the screen size on which it is viewed. It keeps images from being larger than the screen width and prevents visitors from mobile devices from needing to do extra work to read your content.

In our design (Responsive Navigation Bar), as you can see in the preview image, there is a horizontal navigation bar or navbar with a logo on the left side and some navigation links on the right side. This is a very simple navigation bar and it is created using only HTML & CSS.

The best part about this navigation bar is, that it is fully responsive for any kind of device including mobile phones. On the pc, this navigation bar is displayed in a horizontal line but on mobile devices, this navbar or navigation bar is displayed in a vertical line. On the mobile, you have the option to show or hide the menu bar by clicking on the hamburger menu icon.

Video tutorial of Responsive Navigation Menu Bar

In the video tutorial, you have seen this is a pure CSS responsive navigation bar and I’ve used CSS @media property to make this navigation bar fully responsive for mobile devices. If you like this responsive navigation bar and want to get source codes of this program then you can easily copy the codes of this tutorial from the given copy boxes or you can also download the code files of this navigation menu bar.

If you’re a beginner and you know a little bit of HTML & CSS then the codes and concept of this responsive navigation menu bar will definitely help you to understand HTML & CSS more. This is a very simple responsive navigation bar with few and clean codes.

Responsive Navigation Menu Bar [Source Codes]

To create this responsive navigation bar. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this responsive navigation menu bar from the below download button.

First, create an HTML file with the name index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Responsive Navbar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <!-- Font Awesome Link for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>

<body>
  <nav>
    <!-- Checkbox for toggling menu -->
    <input type="checkbox" id="check">

    <!-- Menu icon -->
    <label for="check" class="checkbtn">
      <i class="fas fa-bars"></i>
    </label>

    <!-- Site logo -->
    <label class="logo">CodingNepal</label>

    <!-- Navigation links -->
    <ul>
      <li><a class="active" href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Feedback</a></li>
    </ul>
  </nav>

  <!-- Section for image -->
  <section></section>
</body>

</html>

Second, create a CSS file with the name style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

/* Google Fonts Link */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
}

nav {
  background: #0082e6;
  height: 80px;
  width: 100%;
}

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

nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a {
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}

a.active,
a:hover {
  background: #1b9bff;
  transition: .5s;
}

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

#check {
  display: none;
}

@media (max-width: 1050px) {
  label.logo {
    padding-left: 30px;
  }

  nav ul li a {
    font-size: 16px;
  }
}

/* Responsive media query code for small screen */
@media (max-width: 890px) {
  .checkbtn {
    display: block;
  }

  label.logo {
    font-size: 22px;
  }

  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2c3e50;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }

  nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }

  nav ul li a {
    font-size: 20px;
  }

  a:hover,
  a.active {
    background: none;
    color: #0082e6;
  }

  #check:checked~ul {
    left: 0;
  }
}

section {
  background: url("bg.jpg") no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
}

That’s all, now you’ve successfully created a Responsive Navigation Menu Bar using HTML & CSS. If your code doesn’t work or you’ve faced any errors/problems then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

Next articleSide Navigation Menu Bar in HTML CSS

RELATED ARTICLESMORE FROM AUTHOR

88 COMMENTS

  4. Hello, on atom IDE when I minimize the screen, the 3 button option displays correctly. But when I open on google or any other browser and minimize my screen, my nav bar doesn’t show anything. It only shows the background color of the nav bar and no drop-down menu button, any idea why?

  12. Sab thik xa , maile nikkai try gari sake afai pani banayera ,youtube ma ni khoji khoji ek paxi arko trw responsive nai hudaina navbar nai dekhaudaina k vako,live server batai garxu google chrome nai use garxu

    • Bro, you mean navigation bar responsive xw but chrome ma responsive vako check garnw janenw right..?

  13. Thanks a lot bro.
    I am just 10 years old so I didn’t have more idea to create navbar like pro so I used your idea to create a website of my father’s website

  18. Hi, when you press the button, the menu comes from the left. How do I change it so that it's coming from the right or the top (going down)?

  20. Hello,

    I am an amatuer. I tried several times to modify the menu, but not successdful. I hope you can rewrite some of the code. The are two requirememnts.
    1. The hamburger changes to "cross" when it is pressed.
    2. The menu slide from buttom to top.
    Thanks

  22. The input type checkbox and the label tag are used to toggle the navbar means to show or hide the navbar on menu icon click. In the label tag, there is a for="" attribute which is used to control the checkbox. When you click the menu icon which is inside the label tag, the checkbox will be checked and the navbar is shown, and when you again click on that menu icon, the checkbox will be unchecked and the navbar hidden.

    This navbar show or hide is only possible with these tags (input type="checkbox" and label). And I have placed the input tag after the nav and before the ul tag, just because the checkbox will not work if you put the input tag inside the ul tag. If you put the input tag inside the ul tag then this tag will be the child of ul and ul will be the parent of input. Remember that, the child can't control the parent tag so, we can't show/hide the navbar if we make input to a child.

  23. hello bro! I m new follower here ,impressed from your youtube channel so i came here,,
    I m bit confused about you have used input tags and label just after the nav tags what is that for ,plz expain this point to me….Thanks

  40. I see the code in your website(2 window frame) doesn't work responsively but the code in your download link works well. It could be grateful if you checked that, it will be helpful for other beginners.Thanks for your high quality information, just see your video in youtube.

  42. I see the code in your website(2 window frame) doesn't work responsively but the code in your download link works well. It could be grateful if you checked that, it will be helpful for other beginners.Thanks for your high quality information, just see your video in youtube.

  46. Thank you for this tuto,

    I saw on youtube you mentioned java script to close the nav bar when clicking a link. Could you please tell me how to do it I am really struggling ?
    Thank you for your help

  47. It works really nice bro but when i am scrolling in sidebar the background page is scrolling bro and as the top bar(blue) is not sticky the bar goes up and we can clearly see the back page scrolling. can you please help me with how to lock scroll while in sidebar

  63. Hello,
    Thanks a lot for above tutorials.
    I need to ask i tried to fixed position of navigation bar but it is not working.
    Can you suggest me .I used almost same of your code and designed different color and effects .

  64. The html is pulling the css file from the same folder. Did you put the css file into a folder?
    If so, then make sure you tell the browser where to look:

    folderName/style.css

    OR you did not name the css file 'style.css'. If you named it something else, then you have to include the name in the html, so it knows which file to look for:

    instead of:
    yourFileName.css

    rename it to:
    style.css

    OR change the html:
    ` rel="stylesheet" href="yourFileName.css" `

  65. hello, i copied and pasted this to try it out but only the html worked, the css didnt work, also happened when i copied from somewhere as well didnt work, again only the ntml ran, what am i doing wrong ?

  66. This is a font-awesome icon class name. Basically, font-awesome is a website which provides thousands of free icons for web developer/designer. So i used this i class="fas fa-bars" /i> for show that menu button(3 lines bars).

  69. How can you make the list item stay a different color after clicking on it?
    In your example, the Home button is always a different color. How can you have that change with which item is clicked on?

  71. Great video but can you help me if i want to change the background photo because when i go to the section and change the name of your photo to mine it doesnt work and show it white blank page . Any idea ?
    Thank You!

  75. yaa aapne sahi bola download hojayega…..but bro mere pass computer mai already .png icon wali file padi hai aur jab mai upload kar raha hoon aapke code mai script ko remove kar k vo show nahi ho rahi h idk why ?

LEAVE A REPLY

Please enter your comment!
Please enter your name here