How to Make a Nav Bar in HTML

A navigation bar is an essential element of any website, providing visitors with a clear and intuitive way to navigate through its pages. In this step-by-step guide, we will explore how to create a navigation bar using HTML and CSS.

Table of Contents

how to make a navigation bar

Step 1: Set Up the HTML Structure

Open your code editor and type HTML basic structure, like:

<!DOCTYPE html>
<html>
<head>
   <title> Navigation bar </title>
</head>
<body>

</body>
</html>

Step 2: Create a Navigation Bar container

Then we should create a container using <nav> tag and set the class name to ‘navbar‘. This container represents the whole navbar and it allows you to apply specific styles and make positioning adjustments easier. Create <div> inside the <nav> and set the class name to ‘navdiv‘. This represents the content of the navbar.

<body>
   <nav class="navbar">
      <div class='navdiv'>
         
      </div>
  </nav>
</body>

Step 3: Add Navigation Links

To hold navigation links, you can create an unordered list using the <ul> element inside the navigation bar container. Within the <ul> tag, we can add individual list items using <li> tags. Create a navigation link for each list using the <a> anchor tag.

<nav class="navbar">
      <div class='navdiv'>
         <div class="logo"> <img src="wonder.png">  </a></div>
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <button><a href="#">SignIn</a></button>
            <button><a href="#">SignOut</a></button>
         </ul>
      </div>
  </nav>

You can replace the ‘#’ in the ‘href’ attribute with your appropriate URLs.

Step 4: Style the Navigation Bar

Add the below navbar styles inside the <style> tag.

*{
   text-decoration: none;
}
.navbar{
   background: red;
   font-family: calibri;  
   padding-right: 15px;
   padding-left: 15px;
}
.navdiv{
   display: flex;
   align-items: center;
   justify-content: space-between;
}

li{
   list-style: none;
   display: inline-block;
}
li a{
   color: white;
   font-size: 20px;
   font-weight: bold;
   padding-right: 25px;
}
button{
   margin-left: 10px;
   border-radius: 30px;
   padding: 10px;
   width: 90px;
   background: skyblue;
}
button a{
   color: whitesmoke;
   font-weight: bold;
   font-size: 15px;
}

img{
   width: 200px;
   padding: 15px;
}

Output: