[Resolved] Issue with slide out menu on mobile

[Jake]

Hi there,

Viewing my website on mobile, there was a white gap on the right of all my content. I implemented the following code:

html,
body{
width:100%;
overflow-x:hidden;
}

Which solves the issue until you click the menu toggle and close it – the gap appears again and shifts all content to the left of the screen.

I’m assuming the issue with the slide-out menu created with GeneratePress, I’m using Elementor to build the pages.

Any help is massively appreciated.

[David]

Hi there,

can you flush and disable your cache and remove that CSS you have added so i can take a look at the cause of the problem.

[Jake]

Hi David,

Done 🙂

[David]

Your site is still cached, can you make sure any caches, plugin or server are flushed and disabled.

[Jake]

Apologies, I’ve done this also!

[David]

Its because of this you have in Customizer > Additional CSS:

.mobile-header-navigation {
    padding-top: 20px;
    padding-left: 12px;
    padding-bottom: 20px;
}

Adding padding to an element causes it to increase the width. You can stop that from happening by including the box-sizing: border-box; property ie.

.mobile-header-navigation {
    padding-top: 20px;
    padding-left: 12px;
    padding-bottom: 20px;
    box-sizing: border-box;
}

[Jake]

Perfect, thanks again David!

[David]

You’re welcome

[Author]

Posts