How to create: Bottom navigation

Previous Page Vertical Menu
Next Page Responsive Bottom Navigation

Learn how to use CSS to create a bottom navigation menu.

Create a bottom navigation menu

First step - Add HTML:

<div class="navbar">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

Second step - Add CSS:

/* Place the navigation bar at the bottom of the page and make it fixed */
.navbar {
  background-color: #333;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
}
/* Set styles for links in the navigation bar */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* Change link color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* Add color to active/current link */
.navbar a.active {
  background-color: #04AA6D;
  color: white;
}

Try it yourself

Tutorials:CSS Navigation Bar

Tutorials:How to Create Responsive Bottom Navigation