Responsive Navigation Bar using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a fully responsive navigation bar using HTML & CSS. Earlier, you learned to Create a working user registration form using PHP and MySQL.

What is Navigation Bar?

A navigation bar is a user interface area in a web page containing links to the different pages of a website. It may also include a logo, a search bar, and some buttons. A navigation bar is created in websites for redirecting users from one page to another or one section/div to another section/div. It is also known as the nav bar.

3 Tips to make Nav-bar Better

Use plain and simple design.
Add links to the main pages of your website with an awesome hover effect.
Make its minimum height at least 60 pixels.

Today I will show you how you can create a responsive navigation bar with a cool hover effect using HTML & CSS. To create this nav bar I haven’t used any CSS framework or javascript. It’s made of pure CSS.

The height of this nav bar is 80pixels on desktop and tablet devices and 60pixels on the mobile phone. I have given its background pure white and shadow at the bottom to make its design very simple and attractive. I haven’t used any icons in this nav bar. If you want to add the icons you can easily add them. You can see the logo is in text format but if you want to replace it with the image you can add them inside the <div class=”logo”></div> tag.

Now let's talk about how I make this fully responsive. The very essential thing to make it responsive is a checkbox. When the checkbox is checked navigation menu slides from left to right and if it's again unchecked the menu slides to left and disappears. You can see I have created a hamburger icon using three different div. That hamburger is connected to the checkbox.

If you click the hamburger the checkbox will automatically check and vice versa. To make the user experience good I have given the awesome hover effect in the hamburger and menu. If you hover over the hamburger, the second and third line moves slowly toward the right and the color of the second line changes. And in menu items, if you hover them, a line with 5pixels height will appear moving from left to right.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Responsive Navigation Bar using HTML & CSS).

Video tutorial of Responsive Navigation Bar using HTML & CSS

All this navigation bar design is based on pure CSS. If you’re a beginner you can also create this type of nav bar. If you like this program (Responsive Navigation Bar using HTML & CSS) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.

Responsive Navigation Bar using HTML & CSS [Source Codes]

To create this program (Responsive Navigation Bar using HTML & CSS). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following code into your file. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Note it, you’ve to create a file with a .html extension.

HTML

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Navigation Bar</title>
</head>
<body>
    <nav>
        <div class="logo">LOGO</div>
        <label for="check" class="checkbtn">
            <div class="f-line"></div>
            <div class="s-line"></div>
            <div class="t-line"></div>
        </label>
        <input type="checkbox" id="check">
        <ul>
            <li><a href="" class="active">Home</a></li>
            <li><a href="">About Us</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Downloads</a></li>
            <li><a href="">Contact Us</a></li>
        </ul>
    </nav>
    <div class="container">
        <h1>Responsive Navigation Bar</h1>
    </div>
</body>
</html>

Second, create a CSS file with the name style.css and paste the given code into your CSS file. Note it, you’ve to create a file with a .css extension.

CSS

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
nav{
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    box-shadow: 0px 2px 10px #dadada;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
}
nav .logo{
    margin: 0px 30px;
    font-size: 30px;
    font-family: Verdana, sans-serif;
    color: #f88501;
    flex: 1;
}
nav input{
    display: none;
}
nav label{
    cursor: pointer;
    order: 1;
    display: none;
    flex-direction: column;
}
nav label .f-line{
    width: 40px;
    height: 5px;
    background-color: #000000;
    transition: .3s all ease-in-out;
}
nav label .s-line{
    width: 30px;
    height: 5px;
    background-color: #000000;
    transition: .3s all ease-in-out;
    margin-top: 5px;
}
nav label .t-line{
    width: 20px;
    height: 5px;
    background-color: #000000;
    transition: .3s all ease-in-out;
    margin-top: 5px;
}
nav label:hover .s-line{
    margin-left: 10px;
    background-color: #f88501;
}
nav label:hover .t-line{
    margin-left: 20px;
}
nav ul{
    display: flex;
    margin-right: 100px;
}
nav ul li{
    list-style: none;
    margin-right: 20px;
}
nav ul li a{
    text-decoration: none;
    text-transform: uppercase;
    color: #3a3a3a;
    padding: 5px;
    font-size: 18px;
    position: relative;
    display: flex;
    flex-direction: column;
}
nav ul li a::after{
    content: "";
    position: relative;
    width: 100%;
    height: 3px;
    background-color: #fff;
}
nav ul li a:hover,
nav ul li .active{
    color: #f88501;
    transition: .2s all ease-in-out;
}
nav ul li a:hover::after{
    content: "";
    position: relative;
    width: 100%;
    height: 3px;
    background-color: #f88501;
    animation: underline .5s;
}
@keyframes underline {
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}
nav #check:checked ~ ul{
    left: 0;
    transition: .5s all ease-in-out;
}
.container{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
.container h1{
    font-size: 60px;
}

@media (max-width:900px) and (min-width:650px){
    nav.logo{
        margin-left: 10px;
    }
    nav ul{
        margin-right: 0px;
    }
    nav ul li{
        margin-right: 10px;
    }
    nav ul li a{
        font-size: 16px;
    }
}
@media (max-width:650px){
    nav{
        height: 60px;
    }
    nav label{
        display: flex;
        order: 0;
        margin-right: 20px;
    }
    nav ul{
        top: 60px;
        left: -100%;
        padding-left: 10px;
        position: fixed;
        flex-direction: column;
        background-color: #3d3d3d;
        height: 100vh;
    }
    nav ul li{
        margin-top: 20px;
    }
    nav ul li a{
        color: #fff;
    }
    nav ul li a::after{
        background-color: #3d3d3d;
    }
    .container h1{
        font-size: 30px;
    }
}

That’s all, now you’ve successfully created a fully responsive navigation bar using HTML & CSS. If your code does not work or you’ve faced any errors/problems then please comment down. If you feel this article had helped you, please share it with your friends.

What is Navigation Bar?

3 Tips to make Nav-bar Better

You Might Also Like

Video tutorial of Responsive Navigation Bar using HTML & CSS

Responsive Navigation Bar using HTML & CSS [Source Codes]

HTML

CSS

Post a Comment

Post a Comment

About Us

Contact Form