Bootstrap - Sticky footer navbar Demo

Implementing the Sticky Footer Navbar

To create a sticky footer navbar using Bootstrap, add a <footer> element at the bottom of your HTML page. Inside the footer, create a <nav> element with the classes navbar and navbar-expand-lg to make it responsive. Add the fixed-bottom class to the <nav> element to make the navbar stick to the bottom of the page.

Customize the navbar with your desired links and styling. Inside the <nav> element, add a <div> with the class container to center the navbar content. Create an unordered list (<ul>) with the class navbar-nav to hold your navigation links. Each link should be wrapped in a list item (<li>) with the class nav-item, and the link itself should have the class nav-link.

<footer>
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-bottom">
    <div class="container">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
</footer>

To make sure the navbar stays at the bottom of the page, even when there is not enough content to fill the viewport, add the following CSS to your stylesheet:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

This CSS sets the html and body elements to have a height of 100%, creates a flex container with a column direction for the body, and makes sure that the main content (with the class content) grows to fill the available space while the footer stays at the bottom.

Styling the Main Content

To prevent the main content from overlapping with the sticky footer navbar, add padding to the bottom of the main content container. Wrap your main content inside a <div> element with a class like content or main-content. Then, apply a padding-bottom to this container that is equal to or greater than the height of your sticky footer navbar.

.content {
  padding-bottom: 60px; /* Adjust this value based on the height of your navbar */
}

This padding will push the main content up, leaving enough space at the bottom for the sticky footer navbar to be displayed without overlapping.

If you want to add more visual separation between the main content and the sticky footer navbar, you can apply a background color or other styling to the main content container.

.content {
  padding-bottom: 60px;
  background-color: #f8f9fa; /* Use a light background color */
}

You can also add other styling properties like borders, box shadows, or typography styles to further customize the appearance of your main content area:

.content {
  padding-bottom: 60px;
  background-color: #f8f9fa;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

Remember to adjust the styles to match your desired design and branding. The main goal is to create a clear visual hierarchy and separation between the main content and the sticky footer navbar while maintaining a cohesive overall design.

Responsive Considerations

When implementing a sticky footer navbar, test it on different screen sizes to check if it remains functional and looks good across various devices. Bootstrap's responsive classes make it easier to create a navbar that adapts to different screen sizes, but you still need to test and adjust as needed.

If the collapsed navbar doesn't look or function as desired, you can customize its appearance and behavior using additional CSS.

@media (max-width: 991.98px) {
  .navbar-collapse {
    max-height: 200px; /* Adjust the height as needed */
    overflow-y: auto;
    background-color: #f8f9fa; /* Change the background color */
  }
}

Next, review the padding and styling of the main content area on different screen sizes. The padding at the bottom of the main content container, which prevents overlap with the sticky footer navbar, may need to be adjusted for smaller screens. Use media queries to apply different padding values based on the screen size.

.content {
  padding-bottom: 60px;
}

@media (max-width: 767.98px) {
  .content {
    padding-bottom: 40px; /* Reduce padding on smaller screens */
  }
}

Consider how other styling elements, such as font sizes, line heights, and margins, appear on smaller screens. Make adjustments to these styles using media queries to maintain readability and visual appeal across different devices.

.content {
  font-size: 18px;
  line-height: 1.6;
}

@media (max-width: 767.98px) {
  .content {
    font-size: 16px;
    line-height: 1.4;
  }
}

By testing your sticky footer navbar and main content area on various screen sizes and making responsive adjustments as needed, you can make sure that your web page looks and functions well on all devices, providing a better user experience for your visitors.

Customizing the Sticky Footer Navbar

To customize the look of your sticky footer navbar, you can change the background color and text color of the navbar. Bootstrap has pre-defined color classes that you can use, such as bg-light, bg-dark, navbar-light, and navbar-dark. Add these classes to the <nav> element to change the navbar's color scheme.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">
  ...
</nav>

If you want to use a custom background color, you can make a new CSS class and add it to the <nav> element along with the other Bootstrap classes.

.custom-navbar {
  background-color: #2c3e50; /* Replace with your desired color */
}

<nav class="navbar navbar-expand-lg navbar-dark custom-navbar fixed-bottom">
  ...
</nav>

Next, you can add or remove links in the navbar as needed. Edit the list items (<li>) and their anchor tags (<a>) inside the <ul> element with the class navbar-nav. Each <li> element should have the class nav-item, and each <a> element should have the class nav-link.

<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Services</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
  </li>
</ul>

You can also change the styling of the links on hover or active states to give visual feedback to users. Bootstrap adds some default styles to the .nav-link class, but you can override them with your own CSS.

.navbar-nav .nav-link:hover {
  color: #ffffff; /* Change link color on hover */
  background-color: rgba(255, 255, 255, 0.1); /* Add background color on hover */
}

.navbar-nav .nav-link.active {
  color: #ffffff; /* Change link color when active */
  background-color: rgba(255, 255, 255, 0.2); /* Add background color when active */
}

You can also add other styling properties like borders, text decorations, or transitions to further customize the look of your navbar links.

.navbar-nav .nav-link {
  padding: 0.5rem 1rem;
  transition: color 0.3s ease, background-color 0.3s ease; /* Add transition effect */
}

.navbar-nav .nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  text-decoration: underline; /* Add underline on hover */
}

Remember to test your changes on different screen sizes and devices to make sure that the customized sticky footer navbar looks and works as intended.