How to Create a Responsive Bottom Navigation Menu

Having a responsive and user-friendly navigation menu is crucial for a website’s success.

A bottom navigation menu is an intuitive and popular choice for mobile-first designs.

It provides quick access to the main sections of a website, keeping the navigation simple and easy to use.

In this tutorial, we will show you how to create a responsive bottom navigation menu using HTML, CSS, and JavaScript.

Step 1: HTML Markup

First, we will create the HTML structure of the bottom navigation menu.

The HTML code should look something like this:

<div class="bottom-nav">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</div>

Here, we have created a div with the class bottom-nav that contains four a elements, each representing a navigation link.

Step 2: Add Styles with CSS

Next, we will style the bottom navigation menu using CSS. Add the following CSS code to your stylesheet:

.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #333;
  height: 50px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.bottom-nav a {
  color: #fff;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  font-size: 20px;
}

In this CSS code, we have set the display of the bottom-nav class to flex and used the justify-content and align-items properties to center the navigation links.

We have also set the background color to #333 and fixed the position of the bottom navigation bar to the bottom of the page.

Finally, we have styled the text inside the a elements to make it readable and visually appealing.

Step 3: Make it Responsive with JavaScript

Finally, we will make the bottom navigation menu responsive using JavaScript. Here is an example of how to do this:

const nav = document.querySelector('.bottom-nav');

window.addEventListener('resize', function () {
if (window.innerWidth < 600) {
nav.style.display = 'none';
} else {
nav.style.display = 'flex';
}
});

In this JavaScript code, we have selected the bottom-nav element and added an event listener to the window to detect changes in the screen size.

If the screen width is less than 600 pixels, the bottom navigation menu will be hidden, and if the screen width is greater than 600 pixels, the bottom navigation menu will be displayed.

Conclusion

Creating a responsive bottom navigation menu for your website is easy with HTML, CSS, and JavaScript.

With just a few lines of code, you can create an intuitive and user-friendly navigation menu that will make your website look professional and modern.