Back to Community
Home / Community / Theme → Sinatra

How to Customize Your Sinatra Theme Footer: A Complete Guide

34 threads Sep 16, 2025 Theme → Sinatra

Content

Customizing the footer in the Sinatra WordPress theme is a common request, but the process isn't always intuitive. Based on community discussions, users frequently want to adjust the layout, spacing, and content of their footers. This guide compiles the most effective solutions from across the Sinatra support community.

Common Footer Customization Challenges

Users often report issues with:

  • Adjusting the footer height and padding
  • Changing the footer layout and column structure
  • Modifying the appearance of social media icons
  • Controlling where the pre-footer section is displayed
  • Fixing display issues in specific browsers

Solutions and Methods

1. Changing Footer Layout and Columns

To set up a basic footer with logo on left and content on right:

  1. Go to Appearance » Customize » Footer » Main Footer
  2. Choose a two-column layout
  3. Navigate to Appearance » Widgets
  4. Add an Image block with your logo to Footer 1
  5. Add your contact information to Footer 2 using List or Paragraph blocks

For a single-column footer, use this CSS in Appearance » Customize » Additional CSS:

.sinatra-footer-column {
    display: none;
}

.sinatra-footer-column:first-child {
    display: block;
}

#sinatra-footer .sinatra-footer-column {
    flex-basis: 100%;
    max-width: 100%;
}

2. Adjusting Footer Height and Padding

The footer height automatically adjusts to its content. To modify padding instead, use this CSS:

#sinatra-footer .sinatra-footer-column {
    padding-top: 30px;
    padding-bottom: 30px;
}

Adjust the pixel values as needed. The default padding is 70px.

3. Changing Social Media Icon Size

To increase the size of social media icons in the footer:

.sinatra-social-nav > ul > li > a .si-icon {
  font-size: 1.5rem;
  height: 2rem;
}

4. Controlling Pre-Footer Display

To show the pre-footer only on the home page (a known bug workaround):

body:not(.home) #si-pre-footer {
  display: none;
}

5. Making Footer Full-Width with Contained Content

If using contained content but want a full-width footer:

#sinatra-footer > .si-container,
#sinatra-copyright > .si-container {
  max-width: 100%;
}

6. Browser-Specific Issues

If your footer appears at the top of the page in IE11, ensure you're using Sinatra theme version 1.1.0 or higher, as this issue was specifically addressed in that update.

Important Notes

  • Always add custom CSS through Appearance » Customize » Additional CSS
  • Clear your cache after making changes, especially if using a caching plugin
  • Some advanced modifications may require creating a child theme
  • The Sinatra team has indicated they plan to add more footer customization options in future updates

These solutions address the most frequently asked questions about Sinatra footer customization. For more complex modifications, consider consulting WordPress development resources or hiring a developer familiar with theme hooks and filters.

Related Support Threads Support