? Navigation Bar in CSS

A navigation bar (nav bar) helps users move around a website. CSS lets you style nav bars for layout, colors, interactivity, and responsiveness.

Basic Horizontal Navigation Bar

HTML

<nav>  <ul class="navbar">    <li><a href="#">Home</a></li>    <li><a href="#">About</a></li>    <li><a href="#">Services</a></li>    <li><a href="#">Contact</a></li>  </ul></nav>

CSS

.navbar {  list-style: none;  margin: 0;  padding: 0;  background-color: #333;  display: flex;           /* Horizontal layout */}.navbar li {  margin: 0;}.navbar li a {  display: block;  padding: 14px 20px;  color: white;  text-decoration: none;  transition: background-color 0.3s;}.navbar li a:hover {  background-color: #575757;}

Explanation

• The ul uses display: flex to arrange items horizontally.

• Remove bullets and default padding/margin with list-style: none; margin: 0; padding: 0;

• Links (<a>) styled with padding and colors.

• On hover, background changes for interactivity.

Responsive Vertical Menu (for mobile)

@media (max-width: 600px) {  .navbar {    flex-direction: column; /* Stack items vertically */  }    .navbar li a {    padding: 10px;    border-bottom: 1px solid #444;  }}

Adding Active State

.navbar li a.active {  background-color: #04AA6D;}

Add class="active" to highlight the current page link.

Want me to help you build a dropdown menu or sticky navigation bar?