How to create navigation bar using HTML and CSS?

In this post, we will create a navigation bar using HTML and CSS. Well, you can create an awesome navigation bar if you are using some UI framework like Bootstrap but knowing how to create a navigation bar without using any UI framework is a different thing in itself.

So let’s begin.

We are going to create a simple navigation bar with 4 menus – Home Menu, About us, and Contact us.

So first let me show the screenshot of what I have created.

Here’s the screen shot.

So you can see the navigation bar in the above screenshot.

Now let’s see the code for it.

NavigationBar.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">

        <link rel="stylesheet" href="./Navstyle.css">

        <title>Navigation Bar</title>

    </head>

    <body>
        <nav>
            <ul>
                <li><a class="active" href="#">Home</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>

        </nav>
    </body>
</html>

Now let’s see CSS file which I have linked to this HTML.

Navstyle.css

ul{
    background-color: #ff4081;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    list-style-type: none;
}

li a:hover:not(.active){
    background-color: #6a0080;
}

li{
    float: left;
}

li a{
    color: #ffffff;
    display: block;
    text-align: center;
    padding: 15px 15px;
    text-decoration: none;
}

.active{
    background-color: #78002e;
}

Let me know if you have any problem understanding the code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: