Weird white space in one page design

[neilhartley]

Yes but they were added to ensure the scroll on mobile was working correctly (your recommendation to solve a previous support query)…

[jade]

Hi there,

I have gone ahead and review the other thread that you have mentioned. Is the page in questiond still the Custom Under Construction page? By default, the fixed top menu will have a relative position on mobile unlike what is set on desktop view because if the menu area will have fixed position on mobile, it will cover some of the content of the page where the viewing space is limited.

For example this:

As what you can see, when the mobile menu is set to fixed position just like on desktop, it will cover some of the page contents as you scroll through the page when it is collapsed.

However, you can override the default CSS and force the menu area to display fixed by using this code:

@media (max-width: 979px) {
    .x-navbar-fixed-top {
        position: fixed;
    }
}

If you want the collapsed navigation to close as you click on a menu item, please add this code in the JS panel of the page:

jQuery(function($){
  
  $('.mobile .x-nav a').on('touchend click', function(){
    $('.x-btn-navbar').click();
  });

});

You can now then remove the code below that is causing the issue on desktop:

html, body {
    overflow: scroll !important;
    height: auto !important;
}

Again, please note that the code suggestions I have provided are overriding the default behavior of the theme and they are based on your current setup. There is a chance that those codes will not work in case there is something on your setup changes or for any other reason. In case this happens, it will be your responsibility to maintain and update the code accordingly.

Hope this helps.

[neilhartley]

OK, thank-you. I appreciate your help…

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!