BugWP logo BugWP
Back to Community
Home / Community / Plugin → Ultimate addons for elementor

How to Fix the White Space or Gap Below Your Elementor Footer

20 threads Sep 16, 2025 Plugin → Ultimate addons for elementor

Content

One of the most common issues reported by users of the Elementor Header & Footer Builder plugin is an unexpected white space or gap appearing below the footer on their website. This gap is often most noticeable on pages with less content or when viewed on mobile devices. Based on community troubleshooting, here are the most effective ways to diagnose and resolve this problem.

Why Does This White Space Appear?

The white space is not a feature of the plugin itself but is usually the result of a conflict. The footer builder replaces your theme's default footer, but other factors on your site can influence the overall page layout, sometimes creating this unwanted gap. Common culprits include:

  • CSS Conflicts: CSS from your theme, other plugins, or Elementor widgets can add unexpected margin or padding.
  • Sticky or Expanding Menus: A frequent cause is a navigation menu widget that expands, such as a dropdown submenu. The page may be reserving space for the expanded menu even when it's closed.
  • Theme or Plugin Conflicts: Another active plugin or your theme's base styles might be generating extra space.
  • Caching: Sometimes, old cached versions of your CSS can prevent fixes from being visible.

How to Troubleshoot and Fix the Footer Gap

Try these solutions in order. Remember to clear your browser and site cache after each step to check if the issue is resolved.

1. Apply Specific CSS for Navigation Menus

This is a very common fix. If you have a menu with dropdown items in your footer, the space for the expanded menu might be causing the gap. Try adding the following CSS to your site (via Appearance > Customize > Additional CSS or a custom CSS plugin).

.elementor-element-UNIQUEID ul.sub-menu {
    display: none;
}

.elementor-element-UNIQUEID ul.sub-menu.sub-menu-open {
    display: block;
}

Important: You must replace UNIQUEID with the actual unique ID of your menu widget. You can find this ID by inspecting the element with your browser's tools or by looking for a CSS class on the widget in the Elementor editor.

2. Check for Simple CSS Overflow

In some cases, a simple CSS rule can contain the layout. Add this CSS to your site to test if it resolves the issue.

footer#colophon {
    overflow: hidden;
}

3. Perform a Conflict Test

If the CSS solutions don't work, a plugin or theme conflict is likely. To test this:

  1. Switch Themes Temporarily: Activate a default WordPress theme like Twenty Twenty-One. If the white space disappears, the issue is likely with your original theme.
  2. Deactivate Plugins: Deactivate all plugins except for Elementor and the Elementor Header & Footer Builder plugin. If the space is gone, reactivate your plugins one by one to identify which one is causing the conflict.

4. Clear All Caching

Ensure you clear any caching on your site after making changes. This includes:

  • Your browser cache (hard refresh with Ctrl+F5).
  • Any caching plugins you have installed (e.g., WP Rocket, W3 Total Cache).
  • Server-level or CDN caching (you may need to contact your hosting provider for this).

Need More Help?

If you've tried all these steps and the issue persists, the best way to get help from the community is to provide specific details when asking for help:

  • The URL of the page where the issue is visible.
  • A clear screenshot or screen recording highlighting the problem.
  • A list of the themes and plugins you are using.
  • Details of the steps you have already tried.

This information will help others accurately diagnose the specific cause of the problem on your site.

Related Support Threads Support