Quiz Entry - updated: 2026.07.14
How do you create a responsive navigation bar with W3.CSS?
Build the navbar from a w3-bar container holding links styled with w3-bar-item w3-button, adding w3-mobile to make them stack on phones.
<nav class="w3-bar w3-blue">
<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>
</nav>
Key classes:
| Class | Purpose |
|---|---|
w3-bar |
Horizontal bar container |
w3-bar-item |
Item within the bar |
w3-button |
Button styling with hover effects |
w3-mobile |
Makes item full-width on small screens |
Adding responsiveness:
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
With w3-mobile, links stack vertically on phones.