Create a Simple Navbar with 7 Lines of CSS

Navbars are an essential part of any kind of website. I often see beginners write tons and tons of CSS rules to position the navbar elements, and more CSS to make that responsive. So in this article, I'm going to show how you can create a simple navbar with just 7 CSS rules and build upon that.

HTML Setup

Here's all the HTML that we're going to need to create the navbar. Note that I'm not using any classes for simplicity purposes but I recommend you to do so if you're planning to use this base for a project.

<nav>
  <h2>Title</h2>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</nav>

At this point, without any CSS, Your navbar should look something like this.

Yeah, not nice. Let's change that!

CSS Setup

Before writing any CSS for the navbar, let's reset the padding and margin of our document and use a nicer font.

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Arial, Tahoma, Serif;
  color: #263238;
}

Styling the Navbar

Let's get to a fun part! We're going to use Flexbox to align our elements. If you don't know what Flexbox is, it's a one-dimensional layout model that offers space distribution between items and powerful alignment capabilities. If you want to learn about flexbox, this is a great resource.
Here are the 7 magic rules that is going to give us a good base to work with,

nav {
  display: flex; /* 1 */
  justify-content: space-between; /* 2 */
  padding: 1rem 2rem; /* 3 */
  background: #cfd8dc; /* 4 */
}

nav ul {
  display: flex; /* 5 */
  list-style: none; /* 6 */
}

nav li {
  padding-left: 1rem; /* 7! */
}

Here's how the navbar should look now,

Does it look finished? No. Is it responsive? No. But is this a good base to work with? Absolutely. You can now follow your website's design language and make it look like what you want.

For a starter, you can make the navbar links look a lot better just by removing the text-decoration and picking a better color like so,

nav a {
  text-decoration: none;
  color: #0d47a1
}

Much better, right?

Making it responsive

Don't worry, I'm not going to leave you hanging with an unresponsive navbar. Let's make it responsive!
Normally for mobile devices, you'd want a hamburger menu that reveals the navbar links. But for simplicity purposes, let's stack the elements on mobile devices. We can do this with a simple media query like so,

/* 
  Extra small devices (phones, 600px and down) 
*/
@media only screen and (max-width: 600px) {
  nav {
    flex-direction: column;
  }
  nav ul {
    flex-direction: column;
    padding-top: 0.5rem;
  }
  nav li {
    padding: 0.5rem 0;
  }
} 

This is how it should look on smaller devices now,

Final words

As you can see, creating a navbar and making it responsive isn't all that hard. You can now go crazy and make it look very pretty. Let me know if you make something with this base!

If you'd like to chat with me about anything technology or just say hi, you can Connect with me on LinkedIn or Find me on Twiiter. My DMs are open!

I'm leaving the full codepen project here if you want to see it in action, hope you liked it!