CODE TUTORIAL | CSS

Simple Menu Navigation Bar Styling

For CSS newbies, a navigation bar is something that you’ll encounter sooner or later. This is the first post for a series of back-to-basics code tutorials I’m doing in conjunction with my YouTube channel reboot.

I’m a writer by strength but I also want to get better at explaining things verbally too. This is the write-up part for the video below. Don’t forget to like and subscribe 😉

Most navigation bars you’ll encounter comes in the form of a list. However, lists by default designs are generally ugly. In this tutorial, we are going to turn the unordered list item into a simple and visually pleasing horizontal navigation bar.

First, let’s start off with our unordered list:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">FAQ</a></li>
  <li><a href="#">Contact</a></li>
</ul>

This is what it currently looks like:

In short, it’s pretty basic and very 1980s Internet. So how do we get from the above to the…