How to Create: Responsive Bottom Navigation Menu

Learn how to create a responsive bottom navigation menu using CSS and JavaScript.

Create a responsive bottom navigation bar

Step 1 - Add HTML:

<div class="navbar" id="myNavbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>

Links with class="icon" are used to open and close the navigation bar on small screens.

Step 2 - 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 the style for the 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 the color of the link when the mouse hovers over it */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* Add a green background color to the active link */
.navbar a.active {
  background-color: #04AA6D;
  color: white;
}
/* Hide the links that should open and close the navigation bar on small screens. */
.navbar .icon {
  display: none;
}

Add media query:

/* Hide all links except the first one ("Home") when the screen width is less than 600 pixels. Display links that should open and close the navigation bar (.icon). */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}
/* Add the "responsive" class to the navigation bar when the user clicks on the icon using JavaScript. */
This class makes the navigation bar look better on small screens (links are displayed vertically instead of horizontally). */
@media screen and (max-width: 600px) {
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

Step 3 - Add JavaScript:

/* Switch between adding and removing the "responsive" class when the user clicks on the icon in the navigation bar */
function myFunction() {
  var x = document.getElementById("myNavbar");
  x.className += " responsive";
    else {
  }
    x.className = "navbar";
  }
}

Try It Yourself

Related Pages

Tutorial:CSS Navigation Bar