Tagged: breakpoint, CSS, mobile menu
Hi Guys,
I’m trying to work out the new mobile menu structure but have a pressing issue after latest upgrade.
Could you please provide a css snippet for changing the trigger/break point for the mobile menu the css I used for previous version no longer works).
Many Thanks,
M
Hey M1000000,
Could you please give us a link to your website, we need more context to be able to help you.
When do you want the menu to change to burger icon?
Best regards,
Victoria
Hi – working localhost as unable to update Enfold on live site until this resolved
Simply this:
By default the main_menu nav switches to the mobile hamburger menu at 960px (I think).
I need the main_menu nav to switch to the mobile hamburger menu at 1060px instead.
I need some quick css to make this happen.
Thanks, M
OK – this seems to work – pls advise if there’s a better approach.
The second .av-burger-overlay query is needed to hide the mobile menu if it has been opened but not closed before screen resolution changes.
@media only screen and (max-width: 1060px ) {
.av-burger-menu-main {
display: block!important;
}
#top .av_mobile_menu_tablet .av-main-nav .menu-item {
display: none!important;
}}
@media only screen and (min-width: 1059px ) {
.av-burger-overlay {
display: none!important;
}}