5.9 Fixed header

You may have noticed the recent design trend where the header sticks to the top of the screen as you scroll down the page. This is called a fixed header—the header is styled to use position: fixed to take the header entirely out of the page content and stick it to the top of the user’s browser. If your site has a bunch of different sections that your users need to navigate to, a fixed header can be a good solution to keep them from getting annoyed that they always have to scroll to the top to do something new.

The way to implement a fixed header is to change the positioning of the header to fixed while specifying a z-index for the header. Recall from the beginning of Section 5.8 that the z-index determines whether an element is drawn in front or behind other elements. We’ll want to give our header a large value for z-index, which will force the browser to draw the element above other elements (i.e., closer to the user using our stack-of-paper analogy).

The styles to change the positioning value and set a z-index are shown in Listing 5.35.

.
.
.
.header {
  background-color: #000;
  color: #fff;
  position: fixed;
  width: 100%;
  z-index: 20;
}
.
.
.

When you check the work in your browser, you’ll find that the header is now pinned to the top of the screen, and when you scroll, all the content will scroll underneath (Figure 5.40).

Figure 5.40: A fixed header—you can see that it is covering content now.

The resulting black bar at the top looks cool, but what if we were to put a border around the entire page? It could look interesting to have a dark area around the whole site to frame the content. We can arrange for this with the styling shown in Listing 5.36.

.
.
.
/* GLOBAL STYLES */
html {
  box-shadow: 0 0 0 30px #000 inset;
  padding: 0 30px;
}
.
.
.

Listing 5.36 introduces the box-shadow style, which is a relatively new CSS style that lets you add drop shadows to HTML elements, and the declaration that we added is a shorthand for box-shadow: x-axis y-axis blur size color inset. We aren’t going to go any deeper into it, but if you want to play around with box shadows there are a number of sites that let you fiddle with the settings, such as CSSmatic box shadow.

After applying the code in Listing 5.36, your page should now look like Figure 5.41.

Figure 5.41: Box shadow inset around the entire page. Nifty.

After saving and refreshing, you might have noticed that the logo in the header now looks a little off since it isn’t right up in the corner anymore. This is because we increased the padding on the entire site by 30px for the black border. Let’s use a negative value (-30px) on the positioning to get it back in place, as shown in Listing 5.37.

.
.
.
.header-logo {
  background-color: #000;
  box-sizing: border-box;
  display: block;
  height: 10vh;
  left: -30px;
  padding-top: 10px;
  position: relative;
  text-align: center;
  width: 10vh;
}
.
.
.

The fixed final header should now look like Figure 5.42 (shown as it should appear with the mouse cursor on the logo, making it orange).

Figure 5.42: A completed page header.

One thing you might have noticed is that after adding fixed positioning to the header, the big h1 text in the hero is covered. We’ll tackle this issue in Section 6.2.

Now that we’ve got the header squared away, let’s turn our attention to the other end of the site.