W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
body {
 margin: 0;
 padding: 0;
}

h1 {
  margin-top: 60px;
  margin-left: 10px;
}

h2, p {
  margin: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
  position: fixed;
  top: 0;
  width: 100%;
}

ul li {
  float: left;
}

ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover:not(.active) {
  background-color: #111;
}

ul li a.active {
 background-color: #04AA6D;
}
</style>
</head>
<body>

<ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li><a href="#about">About</a></li>
</ul>

<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect! The nav bar will stay at the top of the page while scrolling</h2>

Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.
Some text some text some text some text.

</body>
</html>