Prev Next

CSS Horizontal Navbar

A horizontal navbar displays links side-by-side, typically at the top of the page. This common pattern helps users quickly access main sections. Flexbox or inline-block display methods are often used to achieve a clean horizontal layout, adjusting spacing and hover effects for a professional look.

Key Topics

  • Top-level Navigation
  • Horizontal Link Arrangement
  • Hover and Active States

Example (Flexbox)

Use Flexbox to evenly distribute links along a horizontal bar.

.horizontal-nav {
    display: flex;
    background: #333;
}
.horizontal-nav a {
    color: #fff;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
    flex: 1;
}
.horizontal-nav a:hover {
    background: #444;
}

Explanation: Flexbox distributes links evenly, creating a horizontal menu that scales well if more links are added, or if viewed on different screen sizes.

Key Takeaways

  • Common Pattern: Horizontal navbars are user-friendly and familiar.
  • Flexibility: Flexbox makes distributing links easy and responsive.
Prev Next