How to make a basic navigation bar using HTML and CSS

Hello everyone and welcome to a simple tutorial on how to make a basic navigation bar using HTML and CSS only. Therefore, this is not a huge post, so let us get started.

How to make a basic navigation bar using HTML and CSS

We do have an inbuilt tag in HTML5, called <nav> that is going to help us with our cause. Furthermore, it makes our code much more semantic and concise. The <nav> tag works pretty much like a <div> tag under which we have our navigation links. How do we define a <nav> tag then? Simple. We just call it by the tag name <nav> and end it with the </nav> tag.

 

<nav>
    
    <!-- Insert code here -->

</nav>

 

But that line of code just segregates the top part of the web page for the nav bar. What about the actual elements that make up the navigation bar? Well, there are two ways to go about this.

  • Using <li> tags, which is the more conventional way.
  • Using <a> tags, which can seem to be tedious but is fun to play around with.

I just like to use <a> tags because it lets me play around with customization. So lets get to adding the <a> tags to the <nav>:

HTML CODE

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Nav bar</title>
</head> 
<body> 
    <nav>
        <a href="">first</a>
        <a href="">second</a>
        <a href="">third</a>
        <a href="">fourth</a>
    </nav>
</body> 
</html>

 

Note that the nav bar does not look very presentable which is where our CSS comes into the picture. Let us make a checklist of what needs to be changed.

  • The color of the <a> tags.
  • The appearance and spacing.
  • Hover effects.

Therefore, let us get to work on our CSS. Furthermore,  make sure to include your CSS file into your HTML using the <link rel=”stylesheet” href=”file_name.css”>.

CSS CODE

 

nav
{
    text-align: center;
}
nav a
{
    font-size: 25px;
    text-decoration: none;
    color: #4e45d1;
    margin: 10px 50px 10px 50px;
}

From the checklist above, we have done the following:

  • Changed the color of the <a> tags.
  • The appearance and spacing.

Now, let us add the hover effects. This is done using a concept in CSS called pseudo-classes. We have a bunch of pseudo-classes and the one we will focus on is called “: hover”. Therefore, let us now add the changes that need to happen when we hover on the navigation items.

 

body
{
    margin: 0;
    padding: 0;
}
nav
{
    text-align: center;
    background-color: #e9e9e9;
    padding: 20px;
}
nav a
{
    font-size: 25px;
    text-decoration: none;
    color: #4e45d1;
    margin: 10px 50px 10px 50px;
}
nav a:hover
{
    font-size: 27.5px;
    color: #000;
    background-color: #fff;
}

What all have we done now? We have:

  • Added a basic hover effect which does not look very appealing.
  • Made the margin and padding of our body as 0 in order to let the nav bar be at the start of the page.
  • Added padding to the nav bar to make it look slightly bigger.

But I am still not happy with the result. So let us add some more visual changes and enhancements to the nav bar such as transitions and font change.

 

body
{
    margin: 0;
    padding: 0;
}
nav
{
    text-align: center;
    background-color: #e9e9e9;
    padding: 20px;
}
nav a
{
    font-size: 25px;
    text-decoration: none;
    color: #4e45d1;
    margin: 10px 50px 10px 50px;
    transition: 0.3s;
}
nav a:hover
{
    font-size: 27.5px;
    color: #000;
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
}

This looks a lot cleaner with subtle animation and a font size increase on hover. This completed our simple navigation bar using HTML and CSS. We can customize this however we want from this stage forward, so go crazy with the customization guys! Let me know if you want more tutorials on code like this, and do leave your feedback in the comments below! Meanwhile, have a look at my  previous posts :

Introduction to responsive web-page development (part 1)

Introduction to responsive web-page development (part 2)

Leave a Reply

Your email address will not be published. Required fields are marked *