W3Schools Tryit Editor

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

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

h2, p {
  margin: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
  position: fixed;
  bottom: 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 Bottom Navigation Bar</h1>
<h2>Scroll this page to see the effect! The nav bar will stay at the bottom 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>