CSS Responsive Navigation Bar

This navigation bar shows the logo on the left and the links on the right. On a small screen the links stack under each other. It uses only HTML and CSS.

HTML

<nav class="navbar">
  <a class="logo" href="/">MySite</a>
  <ul class="links">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

CSS

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333;
  padding: 0 16px;
}
.navbar a { color: #fff; text-decoration: none; padding: 14px 12px; display: block; }
.logo { font-weight: bold; font-size: 20px; }
.links { display: flex; list-style: none; margin: 0; padding: 0; }
.links a:hover { background: #0073aa; }

@media (max-width: 600px) {
  .navbar { flex-direction: column; align-items: flex-start; }
  .links { flex-direction: column; width: 100%; }
}

Output in the browser (wide screen):

How it works

• justify-content: space-between pushes the logo to the left and the links to the right.
• The media query changes the direction to a column on screens up to 600px wide.
• For many links, add a menu button with a little JavaScript to open and close the list.

Related: CSS Flexbox and CSS Media Queries.

• Previous Code
• Next Code

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.