I would like to Set Mobile Menu to browser width below 1024 instead of 990. Can you provide me with a way to accomplish this? Thanks!
Hey Beth,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
@media only screen and (max-width: 1023px) {
.responsive.html_mobile_menu_tablet .main_menu .avia-menu,
.responsive.html_mobile_menu_tablet #header_main .social_bookmarks,
.responsive.html_mobile_menu_tablet #header_main_alternate{display:none;}
.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide{display:block;}
.responsive.html_mobile_menu_tablet.html_logo_right #advanced_menu_toggle{left:50px;}
.responsive.html_mobile_menu_tablet #menu-item-shop {border-right: none !important;}
}
Please let us know if you need additional help.
Best regards,
Sarah
That didn’t work for me. I will input the URL and complete custom CSS I have added onto the site to ensure something else is not conflicting. I am checking it in Screenfly.
Hi,
Please try this instead:
@media only screen and (max-width: 1024px) {
nav.main_menu {
display:none !important;
}
#advanced_menu_toggle, #advanced_menu_hide {
display:block !important;
}
}
Best regards,
Rikard
This also didn’t work. I am posting the quirktools.com for you to verify in private content.
Hi,
You can try this:
@media only screen and (max-width: 1024px) { .main_menu, #header_main_alternate{display:none;} .container #advanced_menu_toggle, #advanced_menu_hide{display:block;} #mobile-advanced{display:block;} }
Best regards,
John Torvik