<header>
  <nav>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5
      </li>
    </ul>
  </nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam nisl. Integer venenatis dolor nec nibh dignissim, vel faucibus nunc posuere. Suspendisse potenti. Etiam lacus arcu, dictum eget sem sed, blandit varius nunc. Integer vehicula lorem tristique odio luctus, sit amet faucibus nisi accumsan. Ut augue ante, tincidunt at malesuada eu, bibendum et tellus. Sed gravida turpis ac massa elementum condimentum. Maecenas id nisl accumsan nisi venenatis consectetur et at tellus. Nunc fermentum justo quis tellus cursus, semper bibendum turpis venenatis. Maecenas faucibus eros vel enim imperdiet blandit. Integer pulvinar dignissim viverra.
</p>
<p>
Donec nec fringilla felis. Nulla imperdiet metus eu mi rutrum, eu gravida dolor iaculis. Sed ultricies nec tortor eu commodo. Nullam pharetra porta sollicitudin. Vestibulum laoreet, mi a condimentum tincidunt, nibh est ultrices justo, vitae lobortis orci lectus feugiat sem. Praesent ultricies massa tellus, eu vestibulum nisl tristique id. Nunc ut dolor fringilla, ullamcorper sapien eu, fringilla purus. Aenean ac facilisis mi.
</p>
<p>
Duis malesuada euismod laoreet. Vestibulum in ipsum dictum, mattis ante mattis, luctus mauris. Sed ac tincidunt enim. Mauris tempus, dui sodales condimentum pulvinar, justo arcu molestie sem, sed rhoncus nunc ipsum nec lacus. Donec tempor lacus a pulvinar pulvinar. Praesent laoreet eu mi sed laoreet. Donec id odio vel sapien tincidunt dictum. Donec eu nibh tristique, imperdiet neque vitae, sagittis lorem. Vivamus faucibus justo posuere bibendum congue. Maecenas at odio urna. Suspendisse placerat at nulla sit amet placerat. Vestibulum metus lectus, semper in ullamcorper ut, hendrerit id turpis. Duis volutpat vel dolor in ultrices.
</p>
<p>
In sodales congue dui, eget placerat lacus interdum eget. Duis convallis nibh a rutrum mollis. Suspendisse sed lacinia mauris, in faucibus dolor. Proin urna dui, aliquet ac dignissim id, rutrum id ex. Nam fermentum magna vel mauris viverra iaculis. Nullam ultricies id libero eget ornare. Aliquam gravida feugiat dolor, vitae venenatis eros pellentesque quis.
</p>
<p>
In pulvinar nibh eget arcu lobortis accumsan. Donec a enim sit amet eros mollis aliquet quis nec sem. Donec condimentum semper neque. Vivamus sit amet neque ut purus lacinia ullamcorper finibus at mauris. Curabitur sapien tellus, ultricies a lobortis vitae, aliquet eget augue. Ut at ornare dui. In commodo facilisis tellus sit amet consequat. Cras vitae suscipit neque. Cras vulputate vulputate risus, id congue sapien fermentum sit amet. Integer tincidunt in erat nec tincidunt. In molestie convallis magna sed accumsan. Suspendisse gravida eros ante, maximus condimentum tellus cursus auctor. Fusce in tempor lacus. Aliquam non aliquam nibh. Mauris commodo tortor sed metus ullamcorper vulputate.
</p>
<p>
Suspendisse potenti. Praesent sem diam, mattis in ullamcorper a, fermentum ut tellus. Suspendisse facilisis iaculis faucibus. Donec condimentum quam eu tempor dapibus. Donec et lorem risus. Vivamus consectetur est vel porta interdum. Cras dictum quis purus a sagittis. Vestibulum id purus ac orci feugiat ornare at a tellus.
</p>
<p>
Fusce libero enim, pretium tincidunt consequat vitae, fringilla a enim. Phasellus mollis erat purus, vitae varius urna molestie quis. Nunc maximus ipsum quis dui porttitor, non aliquam augue fermentum. Integer mollis pulvinar erat, ac consequat quam. Fusce non nibh tempus, sodales sem placerat, commodo turpis. Sed velit ex, consectetur ac bibendum sit amet, auctor a ligula. Cras lobortis tincidunt orci ac vehicula. Sed ac justo non tortor mattis tincidunt. Integer quis orci condimentum, tincidunt ex sit amet, lobortis nulla. Fusce gravida eros sit amet viverra euismod. Mauris a turpis hendrerit, euismod mauris at, iaculis turpis. In ullamcorper, nisl sit amet laoreet aliquet, diam nunc blandit nibh, vitae rutrum eros arcu ac sem. Mauris mattis vulputate cursus. Ut lobortis augue id ligula dignissim facilisis.
</p>
<p>
Etiam cursus tortor ut felis volutpat, nec malesuada ex venenatis. Curabitur lacinia, mi sit amet elementum cursus, lacus erat luctus nibh, sit amet ornare odio ipsum ac sapien. Sed hendrerit non dolor quis tristique. Integer rutrum felis at commodo blandit. Donec imperdiet dui in elementum viverra. Donec viverra est erat, vel viverra justo pulvinar at. Praesent ex ante, posuere imperdiet gravida eu, tincidunt vitae est. Etiam vestibulum purus eu sapien congue ultrices. Duis laoreet libero vitae metus convallis sagittis. Proin sagittis ornare augue, eget mattis turpis. Phasellus egestas vulputate ante ac accumsan. Cras id hendrerit arcu. Suspendisse porttitor sollicitudin tincidunt.
</p>
<p>
Proin erat ligula, feugiat in lectus non, varius faucibus sapien. Pellentesque fringilla sapien eu libero ultrices, vel placerat neque consectetur. Morbi dignissim lacus iaculis accumsan vulputate. Suspendisse sodales felis non laoreet venenatis. Pellentesque finibus sed lacus sit amet pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices imperdiet semper. Nunc porttitor nulla at viverra congue. Vivamus eget posuere sem, at lobortis libero. Curabitur sodales euismod augue dapibus blandit. Nam a vulputate purus, a eleifend dolor.
</p>
<p>
Curabitur iaculis tellus et pulvinar auctor. Morbi imperdiet mauris a porttitor finibus. Mauris ultrices rhoncus enim ut euismod. Maecenas feugiat laoreet gravida. Suspendisse facilisis vel mi volutpat luctus. Phasellus eu velit orci. Ut elementum, dolor a congue interdum, lorem mauris dapibus augue, vitae tempus ante diam nec massa. In sed vulputate erat. Mauris egestas sed ex non feugiat. Proin sed nulla vel massa euismod pharetra nec at tortor. Etiam vitae ipsum non metus congue eleifend non vitae ligula. Pellentesque scelerisque, purus at porttitor aliquet, urna nisl rhoncus purus, nec lacinia dui leo at diam. Suspendisse potenti. Cras maximus consequat semper. Integer blandit metus feugiat fermentum laoreet.
</p>
</main>
body{
  margin:0;
}

nav>ul{
  display:flex;
  list-style:none;
  justify-content:space-around;
  padding:20px 0;
  margin:0;
}

nav{
  max-width:800px;
  margin:auto;
}
header{
  width:100%;
  background:black;
  color:white;
  position:sticky;
  top:0;
}

main{
 max-width:600px;
  margin:auto;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.