How To Build a Simple Navbar with HTML and CSS

How To Build a Simple Navbar with HTML and CSS

In this week's article, I want to jump right into building a simple navbar using HTML and CSS. Let's take a look at the design we will be building and review the requirements.

Table of contents:

What we are building

We will be building a simple navbar with HTML and CSS. We will use the below design as the guideline for our component.

final-navbar.png

Requirements

Below are the requirements we need to build the navbar.

  • Navbar background-color is #333333
  • Navbar hover background-color is #272727
  • Navbar active background-color is #272727
  • Text color is #e7e7e7
  • Brand font-size is 24px
  • Links should have 24px of padding all around
  • RS should be a link

Implementation

Step 1

The first thing I do is ask myself what elements might make sense to build a navbar. With HTML we know we have semantic elements we can choose from. In this case, since we know it's a navigation component we will use the nav element as our wrapping container. Let's also add a class of navbar so we can apply styles later

<nav class="navbar"></nav>

Step 2

Next, I would review the content inside the navigation.

I would split the content into two parts:

  1. The brand content
  2. The navigational items

The reason I would split this up is that the brand content isn't necessarily a navigation item and I want the HTML to have the correct meaning.

Step 3

Next, let's implement option one from Step 2, The brand content. Since we know from the requirements it needs to be a link I would use the anchor tag. I will also add a class name of brand so we can style it later.

Our code should now look like this:

<nav class="navbar">
  <a class="brand" href="#">RS</a>
</nav>

brand-not-styled.png

Step 4

Next, let's implement option two from Step 2, the navigational items. I would classify these as a list of links. Keeping with ensuring our HTML structure is semantic I would use a list to structure the items.

Our code should now look like this:

<nav class="navbar">
  <a class="brand" href="#">RS</a>
  <ul>
    <li>
      <a href="#">Blog</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Profile</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

navbar-unstyled.png

Step 5

Next, let's start adding some styles. I am going to use flexbox (checkout CSS-TRICKS for an in-depth explanation on flexbox) to align the brand and navigation horizontally and start adding some of the required styles.

Our styles should now look like this:

/* We don't want any links to be underlined. Let's remove that globally */
a {
  text-decoration: none;
}

.navbar {
  background-color: #333333;
  display: flex;
  /* let's align the items so everything is nice and centered */
  align-items: center;
}

/* We want all links in the navbar to be #e7e7e7 */
.navbar a {
  color: #e7e7e7;
}

navbar-begin-styles.png

Step 6

Next, let's style the list. Since we want the list to be horizontal we can use flexbox again to achieve this.

Our list styles should look like this:

.navbar ul {
 /* Let's reset the margin and padding of the list so it's is flush. */
  margin: 0;
  padding: 0;
  /* Let's remove the bullet points */
  list-style-type: none;
  /* display the list flex and align the items centered */
  display: flex;
  align-items:center;
}

Overall, our styles should look like this:

/* We don't want any links to be underlined. Let's remove that globally */
a {
  text-decoration: none;
}

.navbar {
  background-color: #333333;
  display: flex;
  /* let's align the items so everything is nice and centered */
  align-items: center;
}

/* We want all links in the navbar to be #e7e7e7 */
.navbar a {
  color: #e7e7e7;
}

.navbar ul {
 /* Let's reset the margin and padding of the list so it's is flush. */
  margin: 0;
  padding: 0;
  /* Let's remove the bullet points */
  list-style-type: none;
  /* display the list flex and align the items centered */
  display: flex;
  align-items:center;
}

navbar-list-flex.png

Step 7

Next, let's style the brand and navigation links. We need to add the spacing around the brand and links.

Our link and brand styles should look like this:

.navbar .brand {
  display: block;
  color: #e7e7e7;
 /* Remove padding from top/bottom and add 24px padding right/left */
  padding: 0 24px;
  font-size: 24px;
}

.navbar ul li a {
  color: #e7e7e7;
  padding: 24px;
  /*Let's make the anchor display block.
     This will ensure when we hover, focus, or is active we get the full width and height 
      of the container.
  */
  display: block;
}

/* When a use hovers or focuses to a link change the background */
.navbar ul a:hover,
.navbar ul a:focus {
  background-color: #272727;
}

Overall, our styles should look like this:

/* We don't want any links to be underlined. Let's remove that globally */
a {
  text-decoration: none;
}

.navbar {
  background-color: #333333;
  display: flex;
  /* let's align the items so everything is nice and centered */
  align-items: center;
}

/* We want all links in the navbar to be #e7e7e7 */
.navbar a {
  color: #e7e7e7;
}

.navbar ul {
 /* Let's reset the margin and padding of the list so it's is flush. */
  margin: 0;
  padding: 0;
  /* Let's remove the bullet points */
  list-style-type: none;
  /* display the list flex and align the items centered */
  display: flex;
  align-items:center;
}

.navbar .brand {
  /*Let's make the anchor display block.
     This will ensure when we get the full width of the container.
  */
  display: block;
  color: #e7e7e7;
 /* Remove padding from top/bottom and add 24px padding right/left */
  padding: 0 24px;
  font-size: 24px;
}

.navbar ul li a {
  color: #e7e7e7;
  padding: 24px;
  /*Let's make the anchor display block.
     This will ensure when we hover, focus, or is active we get the full width and height 
      of the container.
  */
  display: block;
}

/* When a use hovers or focuses a link change the background */
.navbar ul a:hover,
.navbar ul a:focus {
  background-color: #272727;
}

navbar-without-active.png

Step 8

Next, we need one final piece, styling the active navigation link.

First, let's update the HTML to add the active class to the About link.

<nav class="navbar">
  <a class="brand" href="#">RS</a>
  <ul>
    <li>
      <a href="#">Blog</a>
    </li>
    <li>
      <a class="active" href="#">About</a>
    </li>
    <li>
      <a href="#">Profile</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

Next, let's add the active style. Since the active style is the same as focus and hover we can add the active styles to it:

.navbar ul a:hover,
.navbar ul a:focus,
.navbar ul .active {
  background-color: #272727;
}

Overall, our styles should look like this:

/* We don't want any links to be underlined. Let's remove that globally */
a {
  text-decoration: none;
}

.navbar {
  background-color: #333333;
  display: flex;
  /* let's align the items so everything is nice and centered */
  align-items: center;
}

/* We want all links in the navbar to be #e7e7e7 */
.navbar a {
  color: #e7e7e7;
}

.navbar ul {
 /* Let's reset the margin and padding of the list so it's is flush. */
  margin: 0;
  padding: 0;
  /* Let's remove the bullet points */
  list-style-type: none;
  /* display the list flex and align the items centered */
  display: flex;
  align-items:center;
}

.navbar .brand {
  /*Let's make the anchor display block.
     This will ensure when we get the full width of the container.
  */
  display: block;
  color: #e7e7e7;
 /* Remove padding from top/bottom and add 24px padding right/left */
  padding: 0 24px;
  font-size: 24px;
}

.navbar ul li a {
  color: #e7e7e7;
  padding: 24px;
  /*Let's make the anchor display block.
     This will ensure when we hover, focus, or is active we get the full width and height 
      of the container.
  */
  display: block;
}

/* When a user hovers, focuses or if the link is active change the background */
.navbar ul a:hover,
.navbar ul a:focus,
.navbar ul .active {
  background-color: #272727;
}

final-navbar.png

Full code below via codepen:

Conclusion

With some basic knowledge of HTML and CSS, we were able to create a fully functioning navbar component.

If you haven't already please follow me on Twitter (@RoccoSangllino) where I share more information on web development.