-
Posts
-
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; } }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,
RikardSorry! 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
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
- The topic ‘Burger menu highlight/overlay not centred around the menu itself’ is closed to new replies.