Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1198905

    When viewing on browser with width below 767px, if you hover your mouse over the burger menu you can see that there is extra padding on the left that is clickable but no padding on the right. Also, if you are on a mobile and click the burger menu a highlight/overlay shows and has the same thing – padding to the left of the menu but not the right. How can I make this even?

    Something I’ve done which may have caused the issue is made the container have less padding either side on mobiles. This is the CSS I added:

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container {
    width:93% !important;
    max-width: 93% !important;
    }
    .responsive #top #wrap_all .av-flex-cells .no_margin {
    padding-left: 4% !important;
    padding-right: 4% !important;
    }
    }
    #1199621

    Hey mosaic,

    Could you post a link to where we can see the problem please? What happens if you remove the custom CSS you added?

    Best regards,
    Rikard

    #1199736

    Sorry! Link in private section. If you remove the CSS then it fixes the problem however I want to reduce the container padding on mobile which is why I’ve added the CSS in the first place. But this is causing the clickable area of the burger menu on mobile to not be centred. As mentioned, if you hover your mouse over the burger menu you can see the issue. Also on some phones (e.g Samasung Galaxy) an overlay/highlight shows when you click the burger menu and this reveals the issue too.

    You can see the problem in this screenshot here: https://imgur.com/a/vV3usXy

    #1199738

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
    .responsive #top #header_main > .container .main_menu .av-main-nav > li > a {
        padding: 0 20px;
    }
    
    

    Best regards,
    Yigit

    #1199768

    Perfect thank you!

    #1199780

    Hi,

    You are welcome! Let us know if you have any other questions or issues.

    Stay safe!

    Best regards,
    Yigit

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Burger menu highlight/overlay not centred around the menu itself’ is closed to new replies.