Desktop Hamburger Menu causing issue with mobile site Hamburger Menu

Hey Jasmer,

Thank you for the inquiry.

The burger menu is not visible on mobile devices or on smaller screens because the border color of the menu lines is the same as the background color of the header (white). To fix the issue, please add this css code.

@media only screen and (max-width: 767px) {
    #top .header_color .av-hamburger-inner, #top .header_color .av-hamburger-inner::before, #top .header_color .av-hamburger-inner::after {
    background-color: #808080;
    }
}

You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code. And please do not forget to purge the cache.

Best regards,
Ismael

Hi,
Thanks for the link to your site, for mobile portrait this css is giving the burger menu a white background color:

I linked to the file below, it looks like the cached version of your child theme stylesheet.
Please try removing it or adding this to override it:

@media only screen and (max-width: 767px) {
    #top .header_color .av-hamburger-inner, #top .header_color .av-hamburger-inner::before, #top .header_color .av-hamburger-inner::after {
    background-color: #808080;
    }
}

Another possibility is that this white background color was chosen in the Enfold Theme Options ▸ Advanced Styling or in the Enfold Theme Options ▸ General Styling
but I was not able to reproduce it on my test site, I did test Ismael’s css on your site by injecting it and it does work, please give it a try.

Best regards,
Mike

Hi,.
Glad to hear this helped, please include an admin login in the Private Content area so we can help place the burger menu to the right for your mobile device.

Best regards,
Mike

Hi,
Glad to hear this helped, the social icons are not designed to be seen on mobile portrait because as you pointed out “it would be too crowded” this is done with css if anyone wants to show them crowded
unless there is anything else we can help with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Sorry my mistake, please try this css:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
    right: -120px;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike