I have an issue where the menu overlaps the logo if I minimise the screen. I have tried the following:
@media only screen and (max-width: 1130px) {
.av-main-nav > li > a { padding: 0 7px; }
div#header_main .container { padding-right: 10px; }}
And I have set it to activate the mobile burger menu for a browser width below 990px
But still no joy.
Can you help?
Hey studiovene,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
Victoria
Apologies! I have included the link under private conten.
Hi,
Please activate the burger menu just before the menu touches the logo at around 1300px width of the browser window.
/* Activate burger menu */
@media only screen and (max-width: 1300px) {
#top #header .av-main-nav > li.menu-item {
display: none!important;
}
#top #header .av-burger-menu-main {
cursor: pointer;
display: block!important;
}}
For more tips please check https://kriesi.at/documentation/enfold/menu/#-menu-overlaps-logo-on-tablet
Best regards,
Vinay
Dear Vinay
I have done as requested above, but it seems to have made no difference. Can you help?
THanks
Vene
Hi,
Please try this instead:
@media only screen and (max-width: 1300px) {
nav.main_menu {
display: block !important;
}
#avia-menu .menu-item {
display: none;
}
.av-burger-menu-main.menu-item-avia-special {
display: block;
}
}
Also please update your theme to the latest version which is 4.4.1: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update
Best regards,
Rikard