CSS Navigation Bar

A navigation bar (navbar) is the backbone of any website’s layout. It helps users move between pages easily and sets the first impression. In this lesson, we’ll recreate the Learn With Arshyan navbar using HTML and CSS.

Let’s create a Registration Form and style it beautifully with CSS.

HTML Structure

Here’s the base HTML layout for the navbar:

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Navbar – Learn With Arshyan</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <nav class="navbar">
    <div class="logo">
      <img decoding="async" src="logo.png" alt="Learn With Arshyan Logo">
      <span><strong>LEARN WITH</strong> <span class="highlight">ARSHYAN</span></span>
    </div>

    <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Code</a></li>
      <li><a href="#">Services</a></li>
      <li class="dropdown">
        <a href="#">Pages ▾</a>
        <!-- You can add dropdown items here -->
      </li>
      <li><a href="#">Login</a></li>
    </ul>

    <div class="icons">
      <a href="#"><i class="cart">🛒</i></a>
      <button class="dark-mode-toggle">🌙</button>
      <button class="search-icon">🔍</button>
    </div>
  </nav>

</body>
</html>

CSS Styling

Now let’s add CSS to bring the navbar to life with your desired style:

				
					/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Navbar Container */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 40px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Logo Area */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  width: 50px;
}

.logo span {
  font-size: 16px;
  font-weight: 700;
  color: #222;
}

.logo .highlight {
  color: #6a0dad;
}

/* Navigation Links */
.nav-links {
  display: flex;
  list-style: none;
  gap: 25px;
}

.nav-links a {
  text-decoration: none;
  color: #1a1a1a;
  font-weight: 500;
  padding: 8px;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #6a0dad;
}

/* Right-side Icons */
.icons {
  display: flex;
  align-items: center;
  gap: 15px;
}

.icons .dark-mode-toggle,
.icons .search-icon {
  border: none;
  background-color: #6a0dad;
  color: #fff;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
}

.icons .cart {
  font-size: 20px;
  color: #000;
}

Final Tip – Learn With Arshyan

Your navbar is the first thing users interact with — make it simple, clean, and mobile-ready!