Creating a Responsive Sticky Bottom Navigation Bar

by

Creating a responsive navigation bar that sticks to the bottom of the page is a great way to enhance the user experience on a website. This type of navigation bar remains visible to users as they scroll through content, making it easy to access key links at any time. In this blog post, we’ll cover how to create such a navigation bar using HTML, CSS, and JavaScript.

Step 1: HTML Structure

First, let’s create the HTML structure for our navigation bar. We’ll use a nav element containing a list of links.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Sticky Bottom Navigation Bar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="content">
        <!-- Your main content goes here -->
        <h1>Welcome to Our Website</h1>
        <p>Scroll down to see the sticky bottom navigation bar in action.</p>
    </div>

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

    <script src="scripts.js"></script>
</body>
</html>

In this HTML structure:

  • We have a div with the class content to hold the main content of the page.
  • A nav element with the class bottom-nav containing an unordered list (ul) of navigation links.

Step 2: CSS Styling

Next, let’s style the navigation bar to make it sticky at the bottom of the page and responsive.

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.content {
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #333;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
}

.bottom-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

.bottom-nav ul li {
    flex-grow: 1;
}

.bottom-nav ul li a {
    display: block;
    padding: 15px 0;
    text-align: center;
    color: white;
    text-decoration: none;
    font-size: 16px;
}

.bottom-nav ul li a:hover {
    background-color: #575757;
}

@media screen and (max-width: 600px) {
    .bottom-nav ul li a {
        font-size: 14px;
        padding: 10px 0;
    }
}

In this CSS:

  • The body and .content ensure the page takes up at least the full viewport height.
  • .bottom-nav is styled to be fixed at the bottom, with a full width and a background color.
  • The list items inside .bottom-nav are styled to be flexible and spaced evenly across the width of the navbar.
  • The @media query adjusts the font size and padding for smaller screens to ensure the navbar remains usable on mobile devices.

Step 3: JavaScript Functionality

For this example, we don’t need JavaScript to make the navbar sticky since CSS handles it. However, we can add JavaScript to enhance the functionality, such as highlighting the active link.

// scripts.js
document.addEventListener('DOMContentLoaded', function() {
    const navLinks = document.querySelectorAll('.bottom-nav ul li a');

    function setActiveLink() {
        navLinks.forEach(link => link.classList.remove('active'));
        this.classList.add('active');
    }

    navLinks.forEach(link => link.addEventListener('click', setActiveLink));
});

In this JavaScript:

  • We add an event listener for the DOMContentLoaded event to ensure the script runs after the HTML is fully loaded.
  • We select all navigation links and define a function to set the active link by adding an active class.
  • We add click event listeners to each navigation link to trigger the setActiveLink function.

Putting It All Together

Now that we have all the components, you can test your responsive sticky bottom navigation bar by opening the HTML file in a web browser. Scroll through the content and observe how the navigation bar remains at the bottom of the viewport.

Conclusion

Creating a responsive sticky bottom navigation bar is straightforward with HTML, CSS, and a bit of JavaScript. This type of navigation enhances the user experience by providing easy access to important links regardless of the scroll position. Customize the styles and links to fit your website’s design and content needs.