Hi,
Since I’m only using two menu items I’d prefer not to use the hamburger menu on mobile devices and show the same menu as with desktop.
I’m using as Header the Logo center, Menu below but I’ve removed the logo above.
I’ve been reading several posts and tried to make it work using Quick custom css but I can’t seem to find the right solution under 768px. When the screen goes under 768px the menu disappears and instead the logo shows up.
How can keep showing the centered menu with the two items (no logo above) on all devices including mobile and not showing the hamburger menu at all?
Regards,
Kim
Hi,
Could you please give me some feedback, thx.
Hi,
Sorry for the delay.
You can use this css code to hide the mobile menu and display the default menu items. Please don’t forget to toggle the Enfold > Performance > File Compression settings after adding the code.
@media only screen and (max-width: 767px) {
.responsive #top .av-main-nav .menu-item-avia-special {
display: none;
}
.responsive #top .av-main-nav .menu-item {
display: block;
}
}
Thank you for using Enfold.
Best regards,
Ismael
Thank you for your response Ismael.
Is it possible to do the same under 480px?
Best regards,
Kim
Hi Estudio33,
It is doing it under 480, or do you mean just under 480?
Then you can use the code like this:
@media only screen and (max-width: 479px) {}
Best regards,
Victoria