navigation

W3.CSS Navigation Bars

W3.CSS provides an easy way to create responsive and styled navigation bars using the w3-bar and w3-bar-item classes.

Basic Navigation Bar

<div class="w3-bar w3-light-grey">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

Active and Hover Effects

You can add active and hover styles by using the w3-hover and w3-bar-item classes:

<div class="w3-bar w3-dark-grey">
  <a href="#" class="w3-bar-item w3-button w3-blue">Home</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-blue">About</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-blue">Contact</a>
</div>

Responsive Navigation Bar

To make your navigation bar responsive, use the w3-hide-small, w3-hide-medium, or w3-hide-large classes:

<div class="w3-bar w3-light-grey">
  <a href="#" class="w3-bar-item w3-button w3-hide-small">Home</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>