How to Create a Horizontal Navigation Bar

Navigation bars are important for any website. A Navigation bar is basically a list of links. And in HTML, you can make a list using the <li> tag and for links we have <a> tag. So, a basic list of links can be achieved only using HTML, but to make it look more stunning, we’ll use CSS also.

Let’s use only these tags and see how it looks. For an unordered list we’ll also use <ul> tag, and <a> tag will come inside <li> tag because the list should contain the links we want to go to.

INPUT:
<ul> 
    <li><a href=””></a>Home</li> 
    <li><a href=””>About</a></li> 
    <li><a href=””>Contact</a></li> 
</ul>
OUTPUT:

navigation bar

It will look like a list of hyperlinks. But now we are going to add some CSS.

To turn it into a horizontal bar, we are going to use ‘li‘ selector which will change all <li> elements to inline thus reducing the space between them.

INPUT:
<style>  
    li{display: inline;} 
</style>
OUTPUT:

Now our nav bar looks nicer. But the gap between text still needs to be increased. So we use ‘ul‘ selector and ‘word-spacing‘ property.

INPUT:
<style>
     ul {word-spacing: 50px;}
</style>
OUTPUT:

navigation bar

Now, our navigation bar is almost ready. If you want to add some spacing around your navigation bar then you can use the ‘padding‘ property. Background color or image can also be added.

ul {    
    word-spacing: 50px;
    padding: 20px;
    background-image: linear-gradient(to right, #cc33ff, #ff0066);
    letter-spacing: 2px;
}
output:

nav bar

Lets now add some style to text also, for example, color and font type.

INPUT:
a {
    text-decoration: none;
    color: white;
    font-size: 2vw;
    text-transform: uppercase;
    font-width: solid;
    font-family: sans-serif;
}
output:

We can also add a little bit of action so that when you hover your mouse on one of these links it will appear to fade a little. It can be done using the ‘opacity‘ property.

ul li a:hover {opacity: 0.5;}

In the end, to make the navigation bar appear on all of your website pages, you’ll have to copy the code in every HTML file including the index.html file.

0
0

Related Posts