Navigation

Create the HTML for the site navigation, and learn how to pin it to the viewport.

Next video loading... 5
Get Code

Transcript

In this lesson we will be adding the site navigation.

Our first step is to add the HTML, and for your primary navigation there's a special element called nav. Within the nav, the most appropriate way to markup navigation elements is with an unordered list - ul. Within that, we create a list item with the li element and of course an anchor element to actually create the link.

<nav>
  <ul>
    <li><a></a></li>
  </ul>
</nav>

For our site we want to have links for the "About" section, "Tours" section, and in the next lesson we'll be creating the booking page, so we'll create our last link that says "Book Now".

<nav>
  <ul>
    <li><a>About</a></li>
    <li><a>Tours</a></li>
    <li><a>Book Now</a></li>
  </ul>
</nav>

We need to add an href attribute for each of these so that the link actually works. For the "About" and "Tours" section, we can use our id. And just like the selector in CSS, this begins with a pound sign (#) and then the title of our id. For the "Book Now" page this will ultimately lead to the booking.html page.

<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#tours">Tours</a></li>
    <li><a href="/booking.html">Book Now</a></li>
  </ul>
</nav>

And on save, we now see our nav as a list at the top of the document since we have placed it as the first item in the page. Now it's time to begin adding styling.

Let's go ahead and add a comment that defines this as /* Component: Nav */.

The first thing we like to do is reset the list styling. We also learned how to do this in the "Tour Packages" HTML lesson.

So we'll define that the nav ul should have list-style: none which removes the bullets. And we'll also reset margin and padding to remove that extra space. And on save you can see those changes applied.

nav ul {
	list-style: none
	margin: 0;
	padding: 0;
}

Next, since we want our list items to be in a row next to each other, we will use display: flex. And on save you can see that that has occurred.

nav ul {
  /* ...existing styles */
  display: flex;
}

However we would like the spacing between each list item.

So we'll define nav ul li and use padding with top and bottom zero, and 0.5em for the left and right.

nav ul li {
  padding: 0 0.5em;
}

As a reminder, 1em is relative to the font size of the current element.

On save, we see that that padding has been applied.

Now it's time to begin styling the nav element. For our first adjustments, we'll add background, which is a variation of our pink with a little bit of alpha transparency and a little bit of top and bottom padding.

nav {
  background: rgba(251, 169, 195, 0.95);
  padding: 0.25em 0;
}

You can see that this has now been applied and reveals that our nav is spread across the document which is to be expected as by default it is treated as a block element. However, as seen on our final project, we would like this to only take up the width of the list elements contained.

To resolve this we will add display: inline-block and on save you can see that it is now limited to the width of the child list elements.

nav {
  /* ...existing styles */
  display: inline-block;
}

But now it's time to fix the positioning of the navigation within the document. For this, we'll use a new to us property called position: fixed and let's see what happens on save.

nav {
  /* ...existing styles */
  position: fixed;
}

The navigation has seemed to disappear! This is because of something called "stacking context". position: fixed has taken the navigation outside of normal document flow, and because its placed prior to the header, the header has now become stacked on top of the navigation. We will resolve this by using a property called z-index, which takes a numerical value, and we will simply set this to 1.

nav {
  /* ...existing styles */
  z-index: 1;
}

And on Save, z-index has created a new stacking context which means we have explicitly defined that it should be stacked above the header. Again, this is a new stacking context as compared to normal document flow which was causing the header to stack above the navigation.

We also want to fix the alignment, which we'll do by setting top: 0 just to ensure it stays at the top of the viewport, and right: 0.

nav {
  /* ...existing styles */
  top: 0;
  right: 0;
}

And on save, you can see the position has been updated.

Thanks to position: fixed, as I scroll you'll notice that the navigation remains pinned to the top right of the viewport.

I'll also add a border-radius and box-hadow just for a bit more styling against the navigation item.

nav {
  /* ...existing styles */
  border-radius: 0 0 0 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

And then we'd like to style the link elements themselves. So we'll add a rule for nav a and update the color to our brand blue. And we would also like to remove the underline which we can do with text-decoration: none.

nav a {
  color: #150f64;
  text-decoration: none;
}

However, we would like to bring back the underline when the the link elements are hovered. So we'll create a rule for nav a:hover and reapply text-decoration of underline.

nav a:hover {
  text-decoration: underline;
}

And on save you can see the underline coming back when I hover the link elements.

We have two more visual styles to apply. The first is that we would like the link elements to match our brand font. So we can take the nav a selector and add it to our rule that defines elements that can use that brand font, which you can now see on save.

h1,
h2,
h3,
/* Add to this existing list */
nav a {
  font-family: "Kulim Park", sans-serif;
}

The last style as seen on the final project is a border that appears between the list items. We only want to add this border to list item that follow another list item which prevents the border from appearing on the first one.

To set this up, we'll define nav ul li and then use the adjacent sibling selector, which is the plus symbol (+), to say that an li that follows another li should receive the border left of 1px solid and a darker version of our pink.

nav ul li + li {
  border-left: 1px solid #cc6d8f;
}

And on save, you can see that the visual style is complete.

In review, we added the nav element wrapping a unordered list to create each of our link items for our navigation. Then for styling our navigation we notably used position: fixed to pin the element to the top right of the viewport.

We also had to use z-index: 1 to update the stacking context so that the navigation would appear above the elements that followed it rather than the default stacking context which would place it behind those elements due to the navigation being the first element in the document order.

We then made use of the adjacent sibling selector (+) on the li elements to ensure the border only appeared for list items that followed another list item.

Next Lesson