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 have 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, it is fully responsive for any kind of device including mobile phones. On the pc, this navigation bar displayed in a horizontal line but on mobile devices, this navbar or navigation bar 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.

The concept behind shows or hide menu bar on menu icon click is simple. I used HTML <input> and <label> tag to show or hide menu bar. When the checkbox is checked and the menu bar is shown and when the checkbox is unchecked menu bar hidden. If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this navigation bar in html.

Video tutorial of Responsive Navigation Bar in HTML



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 navigation 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 Bar [Source Codes]

Before sharing the source codes of this responsive navbar. Let's a few talks about the main tags and codes of this design. To create this responsive navbar I had used HTML & CSS only which means this is a pure CSS program. As you already know, this program is <ul> and <li> based design, that’s why we can create a menu or navigation links easily. I've used <input type="checkbox"> and <label for=""> tag to toggle menu bar in html for the mobile version. I also used the Fontawesome for a hamburger icon.

There are many things I left. Because I can't say all things in writing. I'm just talking about the main codes of this menu bar but don't worry you'll understand all the codes and concepts after getting the source code of this responsive navbar. 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 dropdown menu css design from the below download button.


HTML CODE:

CSS CODE:




62 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

  1. bahut accha bro ....im your fan....bro your genuine person who post each and everything.....:) love from india

    ReplyDelete
  2. bro why you have used fontaawesome icon because its decreasing the speed of website ....i want to ask can we use a icon instead of script icon ?

    ReplyDelete
    Replies
    1. You can download fontawsesome icons to use in offline.

      Delete
  3. 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 ?

    ReplyDelete
    Replies
    1. Tumko html me img tag use karna padega.. agar .png file upload karna he toh

      Delete
  4. Thank you for providing code bro.

    ReplyDelete
  5. 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!

    ReplyDelete
    Replies
    1. make sure your img is in the same folder where you created HTML & CSS File. You can can send me screenshot of your problem in FB or Insta..
      Instagram - www.instagram.com/coding.np
      Facebook - www.facebook.com/coding.np

      Delete
  6. 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?

    ReplyDelete
    Replies
    1. watch this i already made a videoa about it.
      https://www.youtube.com/watch?v=3mjxYI7bGx0

      Delete
  7. I want to ask what is this coding mean i class="fas fa-bars" /i>. Can you please help me

    ReplyDelete
    Replies
    1. 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).

      Delete
  8. 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 ?

    ReplyDelete
    Replies
    1. ConciseFunctionsMay 16, 2020 at 10:24 PM

      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" `

      Delete
  9. 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 .

    ReplyDelete
    Replies
    1. Give position fixed to navbar. You can also contact on me Instagram for more help.

      Delete
  10. Muito muito muito obrigado pelos tutoriais !!!
    Voçê tem sido " inspirador " !!!!

    ReplyDelete
  11. Hey Man. Excelent job! Thank you for sharing! I really appreciate it.
    keep up the good work

    ReplyDelete
  12. Hi thanks for the good work. I do appreciate.
    How can I stop scrolling on the page when the nav bar is open in mobile view

    ReplyDelete
    Replies
    1. inside media property add this body overflow:hidden.. For more- contact on me Instagram

      Delete
  13. Given codes is not working in my blogger website,why?,please hepl me Bro!

    ReplyDelete
  14. 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

    ReplyDelete
  15. Thank you for sharing..I really appreciate it.
    keep up the good work

    ReplyDelete
  16. 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

    ReplyDelete
    Replies
    1. Here I can't send you codes. Contact me on Instagram.

      Delete
  17. great work, looking for many more projects from you

    ReplyDelete
  18. When I preview on atom it works but on browser it doesn't work.
    Sir could I get your contact for explaining it briefly by sending recording and screenshots.

    ReplyDelete
  19. 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.

    ReplyDelete
    Replies
    1. 2 window frame means? If you elaborate it..it would be helpful.

      Delete
  20. 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.

    ReplyDelete
    Replies
    1. Thanks for telling us and we'll update codes soon.

      Delete
  21. This comment has been removed by a blog administrator.

    ReplyDelete
  22. What if I want to attach a image as a logo. How can I do that?

    ReplyDelete
  23. I want this header sticky. How can i do it?

    ReplyDelete
  24. Hello. Thank you for sharing your code! See.. Everytime I refresh the page in a smaller width, the menu starts open. How can I fix that?

    ReplyDelete
    Replies
    1. Please download files because you may did some mistakes on codes otherwise contact me on Email - codingnepalweb@gmail.com

      Delete
  25. sir you help me in become a html developer my name is dhruv

    ReplyDelete
  26. Thank you man,but could you make a video or reply a script here please so that the responsive navbar also hides on scroll.It would be a perfect video!

    ReplyDelete
  27. 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

    ReplyDelete
    Replies
    1. 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.

      Delete

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post
CodingNepal

Don't forget to Subscribe to our YouTube Channel.

Subscribe To CodingNepal