Build Navigation Bar Html and CSS Step-by-Step Guide

Navigation Bar РHello Everyone Welcome to Frontend Gyaan and My New Blog. In this blog, I will share the code and Tips and TrickBuild Navigation Bar Html and CSS.

Follow @frontendgyaan on Instagram for web development content daily.

Also, Check out ‚Äď

Before starting the blog, you might think about where you can use this project in real-life-based projects. Nav bar is a user interface element within a webpage that contains links to other sections of the website.

For Responsive Nav Bar with Dropdown Menu HTML and CSS only – visit

Learn How to build a top Simple navigation bar with Html and CSS Frontend Gyaan

HTML – Navigation Bar

  • Create an¬†<div>¬†tag with a¬†class¬†‚Äúnav‚ÄĚ.
  • Write link text using <a> tag in Div tag.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav">
  <a class="active" href="#home">Home</a>
  <a href="#news">HTML</a>
  <a href="#contact">CSS</a>
  <a href="#about">Java Script</a>
</div>
</body>
</html>

CSS

  • Set the color of the¬†<body>¬†element with the¬†background¬†property and also set the text color with the color property.
  • style the “nav” class with color, display set to inline-block, set the¬†text-align¬†property to its ‚Äúcenter‚ÄĚ value, set padding, font size, and border radius, and set the text-decoration property to none.
  • style the “nav” class link element (.nav a:hover) with background-color property.
  • Set “nav” class link element (.nav a:active) with background-color property.

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color:#20222f;
  color:white;
}

.nav a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 5px;
}
.nav a:hover {
  background-color: #ddd;
  color: black;
}

.nav a.active {
  background-color: dodgerblue;
  color: white;
}
Learn How to build a top Simple navigation bar with Html and CSS

Output:

Link ‚ÄstResult

If you found any value in this blog you can support me by buying me a coffee. and also Follow Instagram Page @frontendgyaan

If you have any idea then you can contact us

Share your love
Default image

Saksham Raghuvanshi

Hi, I am Saksham Raghuvanshi 2nd-year CSE Student Coding and making websites is my hobby I share daily web development tips and tricks to level up your knowledge ūüĒ• .

Leave a Reply

Your email address will not be published.