[Resolved] Issue with slide out menu on mobile

Home Forums Support Issue with slide out menu on mobile

  • This topic has 7 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #999008
    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.

    #999018
    David
    Staff
    Customer Support

    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.

    #999021
    Jake

    Hi David,

    Done 🙂

    #999033
    David
    Staff
    Customer Support

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

    #999045
    Jake

    Apologies, I’ve done this also!

    #999054
    David
    Staff
    Customer Support

    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;
    }
    #999078
    Jake

    Perfect, thanks again David!

    #999247
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.