Adding a sticky footer to your Jekyll site can enhance user experience by keeping important links and information always accessible at the bottom of the page. This guide will walk you through the steps to implement a sticky footer effectively.

Understanding Sticky Footers

A sticky footer remains fixed at the bottom of the viewport, regardless of the page's content length. It ensures that essential links, contact info, or legal notices are always visible to visitors.

Steps to Implement a Sticky Footer

  • Modify your site's CSS to position the footer.
  • Ensure the footer stays at the bottom even on pages with little content.
  • Test across different devices and browsers for compatibility.

1. Update Your CSS

Open your style.css file or add styles in your site's CSS. Use Flexbox for a modern, flexible layout:

Example CSS:

/* Ensure the html and body take full height */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Set display to flex for the body */
body {
  display: flex;
  flex-direction: column;
}

/* Main content should expand to fill available space */
.content {
  flex: 1;
}

/* Style the footer to be sticky */
footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  background-color: #f8f8f8;
  padding: 10px;
  text-align: center;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

2. Adjust Your Layout

Wrap your main content in a <div class="content"> element to ensure the Flexbox layout functions correctly. For example, in your _layouts/default.html or relevant layout file:

<body>
  <div class="content">
    {{ content }}
  </div>
  <footer>Your footer content here</footer>
</body>

3. Test and Refine

After implementing the CSS and layout changes, test your site on various devices and browsers. Adjust styles as needed to ensure the footer remains fixed at the bottom without overlapping content.

Conclusion

Implementing a sticky footer in your Jekyll site improves navigation and accessibility. By updating your CSS and layout structure, you can create a seamless experience for your visitors. Remember to test thoroughly for compatibility and responsiveness.