Responsive Navigation Menu Bar in HTML CSS

68
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 understanding what I am saying. You can watch a full video tutorial on this navigation bar in HTML.

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 of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.


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

That’s all, now you’ve successfully created a Limit Input Characters using HTML CSS & JavaScript. If your code not 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 and you’ve extracted it.

 

Next articleSide Navigation Menu Bar in HTML CSS
CodingNepal is a blog where we post blogs related to HTML, CSS, JavaScript & PHP along with creative coding stuff.

68 COMMENTS

  1. 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 ?

  2. 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!

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

  4. 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).

  5. 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 ?

  6. 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"

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