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.


<!DOCTYPE html>
<html lang="en">
        <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>


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


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


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

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

    float: left;

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

    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: Logo

You are commenting using your 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: