Recreating cnn taskbar

1

CNNTaskBarI’m trying to recreate cnn.com. If you visit the website you’ll notice that the taskbar at the top remains visible even if you scroll down. How do I recreate that effect?

2

The effect is called a sticky header. It can be done by giving the element a position of fixed and pinning it to the top of the screen, like so:

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

<nav>
  <h1>CNN</h1>
</nav>
1 Like