Hey, learners. Today we will see the different types of navbars and at last, we will make them responsive. I will be showing two types of nav that we can use on a webpage, for an e-commerce store, or for any sort of project that requires a navbar.

Why?

The reason we use the navbar is for the accessibility of navigation links within the page or to some part of the page. In other cases, we also use it to navigate outside our page.
We refer to the navbar as the footer if present at the bottom of the screen. The terms are just the use of accessibility for all users.

We will talk about accessibility in another article.
The footer contains copyrights, more links to external pages, and such.

How?
HTML has provided a unique tag called the nav tag which specifies the screen readers and other tools that there is a nav mentioned in the webpage and can be accessed. We might not notify the difference directly in most cases but it is good to follow the usage of navbars.
If this is your first time making a navbar. Then you are at the right place.

Let us begin.
We will first make a nav that we all are familiar with and do the other two navbars modifying the code.

1)Logo at left, links at right.
We have all seen this and, it is the most common type of navbar. At the end of the code, it will look like this.

Making any navbar is easy if we know the basics of moving around the elements and know the flex property. The rest of the styling lies with our creativity.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

So, this simple navbar code is as follows.
First, create a simple nav tag, and a logo for the page, and then add an unordered list with any choice of list items in it. Change the CSS accordingly later on.

Let us now break down the code. Don’t worry. It is simple than it is in length. First, we are giving the body background color.
Then the nav is made as flex and, here lies the most crucial part. We can control how elements are positioned in the flex using the justify-content property.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

For the whole article, we will use the same.
Then the padding and align-center property to set nav elements along the axis correctly. Similar properties are applied to the “.ul1” and it is given a gap of 30px.

The list items are given padding of 20px and a border radius of 30px to create extra space around them, to display the hover effect smoothly.

The last part includes removing the text style of the list items, changing their color, and making them change the background on hover.

.li1:hover {
    background-color: rgb(52, 194, 52);
    border-radius: 30px;
    transition: 0.4s;
    color: #fff;
}
.ul1 .li1 a {
    text-decoration: none;
    color: rgb(236, 233, 233);
}

The reason I have included the script tag above the nav tag is that, before we interact with the menu of the page, we need to load the JS part.

We will end the article by making it responsive and, then explain the descriptive part of another nav type.

Making One of the nav responsive:

Restaurant Website Using HTML and CSS

Let’s make the first nav responsive to mobile devices and other small-screen devices.

To keep it simple, we will use the drop-down from the second navbar as the drop-down for the first navbar when it is responsive.

So, when the navbar is responsive, we need an icon to get the links in the navbar.
For that, we shall use the font awesome icon menu bars. and style it so, it is invisible when normal.

<div class="bar-ico">
    <i class="fas fa-bars fa-2x bars" onmouseover="down()"></i>
</div>

.bar-ico {  
     display: none;  
    }

i {
color: white;
position: relative;
right: 10px;
}

@media screen and (max-width: 620px) {  
     .ul1 {  
      display: none;  
     }

.bar-ico {
display: block;
}

.nav1img {
width: 200px;
}
}

@media screen and (max-width: 870px) {
.nav1img {
width: 200px;
}

.nav1 {
gap: 50px;
}

.nav2 {
display: none;
}