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