-
Posts
-
Hello,
when we choose in enfold / Header / HeaderLayout / Display of menu items -> Display as icon
this NICE Hamburger Menu appears.But when we come to the mobile breakpoint, the older »enfold mobile menu« shows up again.
Is it possible to use the NICE menu in the mobile version too, so, all the time?
Regards
Hey Jochen,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (min-width: 768px) { li#menu-item-burger { display: none !important; } .js_active.html_burger_menu #avia-menu > li { display: block; }} @media only screen and (max-width: 767px) { #advanced_menu_toggle, #advanced_menu_hide { display: none !important; } .responsive.html_mobile_menu_tablet .main_menu .avia-menu { display: block; }}Best regards,
YigitHi Yigit, thank you, if I write:
@media only screen and (max-width: 767px) {
#advanced_menu_toggle, #advanced_menu_hide {
display: none !important;
}
}the mobile menu stays invisible, that´s fine.
But how do I tell the NICE “Hamburger Menu” (the animated one) to stay visible from min-width: 0px ?
The other lines you wrote, don’t cause that …Hi!
There is no min-width: 0 actually, cause in that point, the page will be closed.
Can you please rephrase or explain us with an example, so we can understand exactly which point you want to cover?Cheers!
Basilis… i want to display the “animated Hamburger Menu” or the “normal menu” all the time (see picture marked red)
not only in the normal version of the website, so in the mobile version of the website too.Hey!
Please change the code to following one
@media only screen and (max-width: 989px) { #advanced_menu_toggle, #advanced_menu_hide { display: none !important; } .responsive.html_mobile_menu_tablet .main_menu .avia-menu { display: block; }}If that too does not help, please create a temporary admin login and post it here privately so we can look into it.
Regards,
Yigit… no, below 768 pixel the “animated Hamburger Menu” menu disappears …
Maybe we just have to change the breakpoint?
Hi!
I have updated my code above if you have missed it, please try it. If it did not work, please create a temporary admin login and post them here privately
Cheers!
Yigitso the best would be, not to show any mobile-menu-version at all
or other way round
only the normal menu for all the view-port situationsit is the unchanged “creative-studio” installation, this is the only thing i changed in style.css.
@media only screen and (max-width: 989px) {
#advanced_menu_toggle, #advanced_menu_hide {
display: none !important;
}
.responsive.html_mobile_menu_tablet .main_menu .avia-menu {
display: block !important;
}
}Hi!
It does work fine on my end. Only way for us to check why it is not working on yours is checking your backend. If you would not like to share the logins, unfortunately, there is not much we can do to help.
Best regards,
Yigitsorry, no problem sharing the login …
now I placed the code from the style.css in the enfold / Quick CSS field
login below …Hey!
I changed the code to following one
@media only screen and (max-width: 990px) { #advanced_menu_toggle, #advanced_menu_hide { display: none !important; } .main_menu .avia-menu { display: block !important; float: right; margin-top: 10px; } } @media only screen and (max-width: 767px) { .main_menu .avia-menu { margin-top: -80px !important; } }Please review your website now
Regards,
YigitHello Yigit,
…and could you please tell me where to change the colours of the icons (hamburger & close X), please?this works for the colors
.av-hamburger-inner,
.av-hamburger-inner::before,
.av-hamburger-inner::after {
background-color: black !important;
}.av-hamburger–spin.is-active .av-hamburger-inner,
.av-hamburger–spin.is-active .av-hamburger-inner::before,
.av-hamburger–spin.is-active .av-hamburger-inner::after {
background-color: red !important;
}
- The topic ‘menu item ICON in mobile version’ is closed to new replies.