2 Easy Steps To Create Horizontal Navigation Menu

In our previous article, we’ve discussed how to create a vertical navigation menu for our web projects. Similarly, we’ve also learned to use google fonts and font awesome icons in our program.

Have you checked that article? If you haven’t then you should definitely go through the article. Here’s the article for you. Go and check the article we will wait for you until you finish reading the article.

How To Create Vertical Navigation Menu Using HTML and CSS?

Welcome back, Did you read our article? How was your experience? If you really liked our article you should surely tell your friends about this.

If you have any suggestions regarding the article please leave your thoughts in the comment box below we will appreciate it that you took out your time to spend in our small effort.

How To Create A Horizontal Navigation Menu?

In this article we are going to discuss on how we can create a Horizontal Navigation Menu using HTML and CSS technology.

This tutorial is divided into two section, Section A and Section B.

In Section A we will write some HTML codes to provide structure for our navigation menu, while Section B covers styling the menu using Cascading Style Sheet (CSS).

Before starting our tutorial let’s have some arrangements necessary for this tutorial.

First, create a new folder on your computer with any of the names you wish. Now open the newly created folder inside your favorite text editor.

For this tutorial, we will be using Microsoft Visual Studio Code.

Now create two file named index.html and style.css inside your text editor. The first file index.html holds all the necessary codes required for structuring the navigation menu.

Similarly, style.css holds all the codes required for beautifying our navigation menu.

Section A : Structuring the Horizontal Navigation Menu

Now, we are ready to move ahead as we have completed all the necessary setup process.

Inside index.html we will write some code to structure the navigation menu as I have already mentioned about it.

First write a basic structure of HTML. Now inside the head tag include a link to external css file.

We will also use font-awesome icons and a google font this project. No you will have an idea on using external resources within your project.

Include these two code snippets inside the head tag.

// code for linking font-awesome css in our index.html file 
<link rel="stylesheet"
 href="https://cdnjs.cloudflare.com/ajax/libs/font      awesome/4.7.0/css/font-awesome.min.css">

// code for linking google fonts in our file
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

// code for linking external css in our file
<link href="style.css" rel="stylesheet">

Inside the body section create a div element with class attribute. Name the class attribute as “nav-bar” as shown in the below code snippet.

Now inside the div you need to create an anchor tag as below

<div class="nav-bar">
    <a href="#" class="active"><i class="fa fa-home"></i>Home</a>
    <a href="#"><i class="fa fa-file"></i>About</a>
    <a href="#"><i class="fa fa-address-card"></i>Service</a>
    <a href="#"><i class="fa fa-image"></i>Gallery</a>
    <a href="#"><i class="fa fa-phone"></i>Contact</a>
</div>

Below is the full source code for your index.html page. Once you finished implementing all the above mentioned code your file will look like the below code snippet.

If you are still confused or came across any error than simply copy all the code from the snippet below and paste it into your index.html file.

<!DOCTYPE html>
<html>

    <head>
        <title>Horizontal Navigation Menu Using HTML & CSS</title>
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <link href="style.css" rel="stylesheet">
    </head>

    <body>
        <div class="nav-bar">
            <a href="#" class="active"><i class="fa fa-home"></i>Home</a>
            <a href="#"><i class="fa fa-file"></i>About</a>
            <a href="#"><i class="fa fa-address-card"></i>Service</a>
            <a href="#"><i class="fa fa-image"></i>Gallery</a>
            <a href="#"><i class="fa fa-phone"></i>Contact</a>
        </div>
    </body>

</html>

Section B : Styling Navigation Menu

Once we are done structuring the navigation, we are ready to style the menu. All the codes for styling will be written inside the style.css file that we have created before.

Now apply the code snippets given below within your style.css file and refresh your browser and you will see the changes.

body{
    margin: 0;
    padding: 0;
}

.nav-bar{
    width: 100%;
    background-color: #555;
    overflow: hidden;
}

.nav-bar a{
    text-decoration: none;
    float: left;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    display: inline;
    color: #fff;
    padding:20px;
}

.nav-bar > a > i {
    margin-right: 10px;
    padding:0;
}

.nav-bar a:hover{
    background-color: #444;
}

.active{
     background-color: #2375e6;
}

So this is how we can create a simple Horizontal Navigation Menu in few steps.

In this tutorial we have learned the following things.

  1. Creating Horizontal Navigation Menu.
  2. Using Icons in your website using font-awesome.
  3. Using Google Fonts in your project.

Demo : Creating Horizontal Navigation Menu

Wait ! we are not done yet. Looking only at the piece of code seems boring right? Don’t worry here is the demo of our project. Click Me.

I hope you’ve enjoyed learning this how-to tricks. If you have any queries regarding this article please feel free to leave your thoughts in the comment box below. Till then Happy Learning.

Are you looking for the best book to learn about web development? Check out this guide that we have prepared for you.

3 Best Book To Learn Web Development For Beginners

Video Tutorial On Horizontal Navigation Menu