Responsive Navigation Menu Bar using CSS Flexbox

Hello readers, Today in this blog you’ll learn how to create Fully Responsive Navigation Menu Bar in HTML & CSS using Flexbox.

A navigation bar is a user interface element within a webpage that contains links to other sections of the website. … A website navigation bar is most commonly displayed as a horizontal list of links at the top of each page. It may be below the header or logo, but it is always placed before the main content of the page.

As you can see in the image, this is a fully responsive navbar using HTML & CSS (Flexbox). I created a cool underline when the user hovers on a specific menu.  You can see in the image this navbar is fully responsive for mobile devices also. Using the CSS @media property I created this navbar responsive for mobile and tablet devices.

Basically, when you resize or minimize your PC window, this navbar automatically takes their height and width according to the window width and height. In the PC version, this navbar menu is shown in horizontal shape but in the mobile version, this navbar menu is shown in vertical shape.

If you’re feeling difficult to understand what I am actually saying. You can watch a full video tutorial on this program or design below.

If you are a beginner, you can also create this navbar. You can use this navbar in your projects, websites, and wherever you want. If you have basic knowledge of HTML & CSS, you can take this navbar at the next level with your creativity.
If you want to get the source code of this navbar. You can easily get the source codes of this program. To get the source codes you just need to scroll down. 

Responsive Menu Bar using HTML & CSS [Source Codes]

As always, before sharing the codes of this navbar. Let’s a few talk about the main tags and codes of this navbar. As you already know, this navbar is fully based on HTML & CSS. You can call it <ul> <li> based program also that’s because to create item list of this menu I used HTML <ul> and <li> tags.
In the HTML File, first I created a <nav> tag and placed all other tags inside it. Simply, The <nav> tag defines a set of navigation links. … The <nav> element is intended only for the major block of navigation links. Then I created a <ul> tag and placed five <li> tags inside it. Inside <li> tag I created <a> tag. This is an anchor tag. It is used to define the beginning and end of a hypertext link. Search engines use the tag to determine the subject matter of the destination URL.
In the CSS File, At first, using * selector I reset default margins and paddings to 0; which automatically browser takes. I used google-font (Montserrat) also. Then I created a navbar using CSS selector. Then I did basic styling to ul, li, and anchor tags like I remove dots of lists, set colors, backgrounds, etc. Using CSS Flexbox I placed list items to the left side and logo to the right side. Then I created a cool underline for show hover effect. After that, using @media property I make this navbar responsive. 
A media query is an HTML/CSS functionality that allows the content of a Web page to adapt to the type of media that the page is being rendered in, such as a computer screen or that of a phone or tablet.
Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. Prerequisites: HTML basics (study Introduction to HTML), and an idea of how CSS works (study Introduction to CSS.)
There are many things I left. Because I can’t say all things in writing. I’m just talking about the main concept and things. Don’t worry you’ll understand all codes and programs after getting the source code of this program.
To create this Responsive 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.

HTML FILE:

<!DOCTYPE html>
<!-- Created By StyleMyCoding-->
  <head>
    <meta charset="utf-8">
    <title>Responsive Navigation Bar</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <nav>
      <ul>
<li class="logo">StyleMyCoding</li>
<li class="items"><a href="#">Home</a></li>
<li class="items"><a href="#">About</a></li>
<li class="items"><a href="#">Blogs</a></li>
<li class="items"><a href="#">Contact</a></li>
<li class="items"><a href="#">Feedback</a></li>
<li class="btn"><a href="#"><i class="fas fa-bars"></i></a></li>
</ul>
</nav>
    <script>
      $(document).ready(function(){
        $('.btn').click(function(){
          $('.items').toggleClass("show");
          $('ul li').toggleClass("hide");
        });
      });
    </script>
  </body>
</html>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat',sans-serif;
}
nav{
  background: #151515;
  padding: 5px 40px;
}
nav ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
nav ul li{
  padding: 15px 0;
  cursor: pointer;
}
nav ul li.items{
  position: relative;
  width: auto;
  margin: 0 16px;
  text-align: center;
  order: 3;
}
nav ul li.items:after{
  position: absolute;
  content: '';
  left: 0;
  bottom: 5px;
  height: 2px;
  width: 100%;
  background: #33ffff;
  opacity: 0;
  transition: all 0.2s linear;
}
nav ul li.items:hover:after{
  opacity: 1;
  bottom: 8px;
}
nav ul li.logo{
  flex: 1;
  color: white;
  font-size: 23px;
  font-weight: 600;
  cursor: default;
  user-select: none;
}
nav ul li a{
  color: white;
  font-size: 18px;
  text-decoration: none;
  transition: .4s;
}
nav ul li:hover a{
  color: cyan;
}
nav ul li i{
  font-size: 23px;
}
nav ul li.btn{
  display: none;
}
nav ul li.btn.hide i:before{
  content: '\f00d';
}
@media all and (max-width: 900px){
  nav{
    padding: 5px 30px;
  }
  nav ul li.items{
    width: 100%;
    display: none;
  }
  nav ul li.items.show{
    display: block;
  }
  nav ul li.btn{
    display: block;
  }
  nav ul li.items:hover{
    border-radius: 5px;
    box-shadow: inset 0 0 5px #33ffff,
                inset 0 0 10px #66ffff;
  }
  nav ul li.items:hover:after{
    opacity: 0;
  }
}

Leave a Reply