If you're working on the Product Landing Page project and are having trouble with some of the user stories, you're not alone.

User story #13 gives a lot of people trouble. It reads:

The navbar should always be at the top of the viewport.

Non-fixed, normal navbar

Imagine you have the following HTML:

...
<header id="header">
  <img src="https://static1.squarespace.com/static/54d3e88ce4b0be204d0da36a/t/566f5b70bfe873371e44c7b0/1525197822184/" alt="logo" id="header-img">
  <nav id="nav-bar">
    <ul> 
      <li><a href="#about-us" class="nav-link">About Us</a></li>
      <li><a href="#videos" class="nav-link">Demo</a></li>
      <li><a href="#photos" class="nav-link">Photo Gallery</a></li>
      <li><a href="#contact-us" class="nav-link">Contact</a></li>
  </nav>
</header>
...

But when you scroll down the page, the navbar eventually leaves the view:

How to create a fixed navbar

To create a fixed navbar, or a navbar that's always at the top of the viewport even as you scroll down the page, there are a few things you need to do.

First, target the header and fix it to the page with the following rule:

header {
  position: fixed;
}

You'll notice that the navbar contracts to its default width, so set its width to the full width of the page:

header {
  position: fixed;
  width: 100%;
}

Depending on the display properties of the other elements, you may need to manually set the top and left positions of the navbar:

header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

Then all you need to do is apply some extra styling to get things looking good:

header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #cc0000;
  color: white;
  font-family: 'Exo 2', sans-serif;
  padding: 1em;
}

Fixed navbar — the result

After that, your navbar should still be visible even as you scroll down the page: