You are currently viewing Step by Step Guide to Make a Navigation Bar in HTML and CSS
  • Post category:HTML

Step by Step Guide to Make a Navigation Bar in HTML and CSS

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.

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>
   <title> Navigation bar </title>


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.

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

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

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

READ ALSO  Correct HTML element for Inserting a Line Break

Step 4: Style the Navigation Bar

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

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

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

   width: 200px;
   padding: 15px;


how to make a navigation bar in html

Leave a Reply