Extra white space on mobile footer

[NiallD1991]

Hi Guys,

For some reason, I am getting a load of extra white space on the bottom of my footer on mobile.

I have checked a few other posts that are having this problem but can’t find the solution,

Can you help??

[marc_a]

Hi Niall,

Thanks for reaching out!

I just check the issue on your website and it seems that the Desktop Header Bar in your Header Builder is causing the issue. The issue is coming from your 5 mega menus which are creating inset inline CSS and it leads them to add extra spaces.

This could be a generated inline CSS when you added some effects on them. I know you will ask why the Desktop Header is still there in the mobile view? The answer is that even though you hide the Desktop Header bar in the Mobile using the Hide During Breakdown functionality. The HTML structure element is just there, they are just being hide using CSS.

To get rid of your issue, we need to get rid of the dropdown containers.

To do that, I suggest that you added a common class to all Mega Menus. For example, I added a class name hide-menu-mobile to all Mega menu containers.

Then to completely remove the containers on the mobile view, please add the code below in your Pro > Theme Options > Global CSS.

@media(max-width: 979px){
  .hide-menu-mobile.x-dropdown {
    display: none !important;
  }
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

[NiallD1991]

Hi Marc,

Wow, I wasn’t expecting it to be that. I am glad I asked! I would have spent ages looking for that!

You solution worked perfectly. Thanks very much.

[marc_a]

Hi Niall,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.