BugWP logo BugWP
Back to Community
Home / Community / Theme → Sydney

How to Fix Common Sydney Theme Footer Issues: A Complete Guide

21 threads Sep 10, 2025 Theme → Sydney

Content

Customizing the footer in the Sydney WordPress theme is a common task, but it can sometimes lead to unexpected layout challenges. Based on community support threads, here are the most frequent footer-related issues and their proven solutions.

1. Repositioning or Styling the Copyright Section

Many users want to move the copyright section to overlay the footer or change its appearance. This can be achieved with custom CSS.

.site-footer {
  position: relative;
  margin-top: -45px;
  background-color: transparent;
}

.site-footer .site-info, .site-footer .site-info a {
  color: rgba(255, 255, 255, 0.5);
}

To remove the copyright text entirely, navigate to Appearance > Customize > Footer > Copyright area and leave the 'Footer credits' box empty.

2. Footer Not Sticking to the Bottom of the Page

This often occurs on pages with minimal content. The solution is to ensure the footer uses proper padding instead of negative margins, which can cause inconsistent behavior.

.footer-widgets {
  padding: 5px 0;
}

3. Footer Widget Columns Not Displaying Correctly

If your footer widgets are stacking vertically instead of displaying in horizontal columns, it is often a browser caching issue. Clear your browser's cache and cookies. If the problem persists, the following CSS can help control the layout.

@media only screen and (max-width: 992px) {
  .footer-widgets .sidebar-column:nth-of-type(2) {
    clear: both;
  }
  .footer-widgets .sidebar-column:nth-of-type(3),
  .footer-widgets .sidebar-column:nth-of-type(4) {
    width: 50%;
    float: left;
  }
}

4. Centering or Realigning Footer Content

To center-align widget content on mobile devices, use a CSS media query.

@media only screen and (max-width: 767px) {
  #nav_menu-2 .widget-title,
  #nav_menu-2 ul li {
        text-align: center; 
  }
}

If a specific widget is not aligning correctly, check its internal width settings. For example, a SiteOrigin widget might need to be set to 100% width.

5. Adding a Background Image to the Footer

Use the following CSS to add a background image. Be cautious, as using background-size: 100% auto; can sometimes create a 1px white gap on the sides; using cover may be a better alternative.

.site-footer, .footer-widgets {
  background-image: url('your-image-url.jpg');
  background-size: cover;
}

6. Styling Footer Widgets (Borders, Button Colors)

To add borders and customize button colors within footer widgets, use this CSS:

.footer-widgets .sidebar-column {
  border: 1px solid #fff;
  padding: 10px;
}
 
.footer-widgets .widget .wp-block-button__link {
  background-color: #07346c;
  color: #fff000 !important;
}
 
.footer-widgets .widget .wp-block-button__link:hover {
  background-color: #a20b8a;
  color: #00dbff !important;
}

7. Changing Footer Heading Font Colors

To change the color of widget titles in the footer, target them with this CSS selector:

#sidebar-footer .widget .widget-title {
  color: #43180A;
}

Important Note on Adding Custom CSS

All custom CSS code should be added in the WordPress Customizer. Go to Appearance > Customize > Additional CSS and paste the code into the provided box. This ensures your changes are not overwritten by theme updates.

By following these solutions, most common Sydney footer customization issues can be resolved efficiently. Always remember to clear your browser cache after making changes to see the correct results.

Related Support Threads Support