Responsive Navigation Menu Bar in HTML CSS

Hello readers, Today in this blog you'll learn how to create a Fully Responsive Navigation Menu Bar using HTML and CSS only. As you know the Menu Bar or Navigation Bar (Navbar) is important for any kind of website.

Many websites have responsive navbar. 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.

As you can see in the image, This is a simple and fully Responsive Navbar Bar, not a stylish or not a fancy one. This is pure CSS based Responsive Navigation Bar where HTML <input type="checkbox"> tag is used to toggle menu bar that means when you click on that three-line bars.

The checkbox will be checked and the menu bar is shown and when you again click on those bars, the checkbox will be unchecked and that shown menu bar will be hidden. This process is only done by HTML <input type="checkbox"> tag and <label> tag.

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program (Responsive Navigation Menu Bar).

Video tutorial of Responsive Navbar Bar in HTML and CSS




Essentially, In this video tutorial, I've used CSS @media property to make this Navigation Menu Bar fully responsive for mobile devices. If you like this program (Responsive Navigation Menu Bar) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Responsive Navigation Menu Bar [Source Codes]

Before sharing the source codes of this program (Responsive Navigation Menu Bar). Let's a few talks about the main tags and codes of this design. To create this Responsive Navigation Bar 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 Menu easily. You can call this CSS Navigation Bar with a responsive design. I've used <input type="checkbox"> and <label for=""> tag to toggle Menu Bar for the mobile version. I also used the Fontawesome icon to show a 3-lines bar. Generally, font-awesome is a website where we can get thousands of free icons for our projects. Importantly, I've used CSS @media property to make this Navigation Menu Bar fully responsive.

There are many things I left. Because I can't say all things in writing. I'm just talking about the codes of this program. Don't worry you'll understand all codes and programs after getting the source code of this Navbar.

To create this program (Responsive Navigation Menu Bar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. In the source files, there you also get a background image of this program. Click here to download source code files.

HTML FILE:



CSS FILE:


Thanks for visiting, Keep visiting.


54 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

Post a Comment

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

Previous Post Next Post