-
AuthorPosts
-
July 20, 2021 at 3:06 pm #1310894
Hello guys
I am experiencing a weird thing with menu on mobile. I am using Max Mega Menu plugin and the menu is working fine when set in Enfold as Logo left and menu right. If i am trying to set any other option the mobile menu does not open anymore.
I would like to have Logo left and menu below, in this way it looks also good on desktop too. But if i set this in Enfold the Max Mega Menu does not open anymore on mobile. I see the icon of the menu, but does nothing on click.Thank you
July 21, 2021 at 7:47 am #1311047Hey hollabrunn,
Thank you for the inquiry.
It is possible that the plugin cannot locate the menu because it is inside another container with the ID “header_main_alternate”. Where can we see the issue? Please post the site URL in the private field.
Best regards,
IsmaelJuly 21, 2021 at 9:03 am #1311067Hello Ismael. Dropped the link in private area.
Will set now logo left and menu below to be able to see the issue on mobile.July 22, 2021 at 12:10 pm #1311446Hello Ismael
Found some documentation and tried this:
@media only screen and (max-width: 989px) {
.responsive #top #wrap_all .main_menu,
.responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
display: none !important;
}
.responsive #header_main_alternate,
.responsive #top #wrap_all #header_main_alternate .main_menu,
.responsive #top .av_mobile_menu_tablet #header_main_alternate {
display: block !important;
position: relative;
}
.responsive .av-burger-menu-main,
.responsive.html_mobile_menu_tablet .av-burger-menu-main {
display: none !important;
}
}
Added into Quick CSS
Now it seems to work on mobile also but is full width.
Can you help me with the adjustments needed to have only the burger icon?July 22, 2021 at 2:39 pm #1311491Hi,
Glad to know that it is now displaying on mobile view. Regarding the adjustments, it seems to be the default layout of the menu. If you want to remove the background color, try this css code.
#mega-menu-wrap-avia .mega-menu-toggle { background: transparent; }
And to adjust its position, use this one.
@media only screen and (max-width: 989px) { #mega-menu-wrap-avia .mega-menu-toggle { position: absolute; right: 0; top: -50px; } .responsive #header_main_alternate, .responsive #top #wrap_all #header_main_alternate .main_menu, .responsive #top .av_mobile_menu_tablet #header_main_alternate { display: block !important; position: absolute; width: 100%; top: 10px; } #mega-menu-wrap-avia .mega-menu-toggle.mega-menu-open + #mega-menu-avia { display: block; top: 50px; } }
Best regards,
IsmaelJuly 22, 2021 at 3:28 pm #1311501Thank you Ismael
With the background works.
With the position no, and this what is happening:When using all the code the burger menu icon does not show anymore on mobile.
When using only this part:
@media only screen and (max-width: 989px) {
#mega-menu-wrap-avia .mega-menu-toggle {
position: absolute;
right: 0;
top: -50px;
}on mobile looks good, the burger menu is near the logo in the right side. BUT on desktop it moves the whole content to the right, i mean the website gets aligned to the right.
July 23, 2021 at 7:08 am #1311735 -
AuthorPosts
- You must be logged in to reply to this topic.