Mobile menu leaves a lot of white space

Support
#1

I asked this question before when setting up my website but didn’t get it resolved. However, it continues to bug me…

On my website www.worldforagirl.com I have a hamburger style menu enabled for mobile devices. It sits below a picture logo that I am using.

However, there is a LOT of white space around the top of my pages on mobile devices:

  • Between my logo picture and the hamburger menu icon; and
  • Between the hamburger menu icon and the start of each page.

Could you advise on how to minimise this white space please?
Some previous advice has affected the layout on desktop devices so please bear that in mind too.

Kirsty

#2

Hi There,

Please add the following CSS under X > Theme Options > CSS:

@media (max-width: 979px){
    .x-logobar-inner {
        padding-bottom: 0;
    }
    .x-btn-navbar {
        margin-top: 5px;
    }
    .x-navbar-inner {
        min-height: auto;
    }
}

Also reduce / remove the top padding of your first section.

Hope it helps :slight_smile:

#3

I tried adding the supplied code under:
Customiser > Custom >Edit Global CSS

Unfortunately, nothing changed at all. If I’ve added the code incorrectly, could you tell me where to put it. If I’ve put it in correctly, could you take another look please?

Kirsty

#4

Hi Kirsty,

I’ve checked your website and I can tell the code isn’t loaded on your website, it could be because of your caching plugin installed “W3 Total Cache”, so please try to clear cache from this plugin and recheck this issue, if this doesn’t help, then please provide us with WordPress Dashboard login details in a “Secure Note” so we can investigate this issue.

Thanks.

#5

Previously, I tried the code and tested it but there was no change. So I removed the code and you won’t have seen it when you looked.

I’ve reinstated the code and left it in there now.

Could you take a look now?
Kirsty

#6

Hi Kirsty,

Thank you for the clarification, the reason the CSS given did not work is because of your commenting in it.


Please update that to this:

/*
// Hamburger menu white space
*/

This remaining gap here is the first Section top padding, you can adjust that by inspecting your section.

Hope it helps,
Cheers!

#7

The code seems to work, so THANKS! It’s been bugging me for a long time.

On the padding, how to I access this via Cornerstone to reduce the padding? I’m assuming you mean to reduce the 45x to 0px but please tell me if you have another idea.

#8

Hi There,

Please take a look at these screenshots:

Hope it helps :slight_smile:

#9

Perfect, thanks!

#10

I tried to use the same Padding fix on the ‘Destinations’ page as there is also a lot of white space there. However, the padding is already set to 0px. Is there another way to reduce the white space on mobile devices around the top of this page?

#11

Hi There,

Please also add this custom CSS:

.x-container.max.width.offset {
    margin-top: 0;
}

Hope it helps :slight_smile:

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.