<div class="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <a href="#contact">Contact</a>

  <a href="#about">About</a>

</div>

​

<div class="main">

  <h1>Fixed Bottom Menu</h1>

  <h2>Scroll this page to see the effect</h2>

  <h2>The navigation bar will stay at the bottom of the page while scrolling</h2>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

  <p>Some text some text some text some text..</p>

</div>

body {margin:0;}

​

.navbar {

  overflow: hidden;

  background-color: #333;

  position: fixed;

  bottom: 0;

  width: 100%;

}

​

.navbar a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

}

​

.main {

  padding: 16px;

  margin-bottom: 30px;

  height: 1500px; /* Used in this example to enable scrolling */

}