Archived topic
Issue with slide out menu on mobile
7 replies · Started by Jake on September 2, 2019
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.
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.
Hi David,
Done :)
Your site is still cached, can you make sure any caches, plugin or server are flushed and disabled.
Apologies, I've done this also!
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;
}Perfect, thanks again David!
You're welcome
