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>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<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>


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

.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


Link – Result

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

Recommend Books –

Our Pick1
Web development book by Jon Duckett Frontendgyaan
Web Design with HTML, CSS, JavaScript, and Jquery

by Jon Duckett

Our Pick2
Web development Book by DT Editorial Service Frontend Gyaan
HTML 5 Black Book, Covers CSS 3, JavaScript

by DT Editorial Service

Our Pick3
Data Structures Using C and C+ by Langsam Frontend gyaan
Data Structures Using C and C+

by Langsam/Augenstein/Tenenbaum

Our Pick4
operating System Concept Frontend Gyaan
Operating system concept 9th EDITION

by Abraham Silberschatz

Share your love
Saksham Raghuvanshi

Saksham Raghuvanshi

Hi, I am Saksham Raghuvanshi 2nd-year CSE Student allured by web and tech enthusiasts, working towards making the web more user interactive and accessible for all 😜


Comments are closed.