Hi,
we changed our logo, but unfortunately now the menu is overlapping (with the logo) for certain screen resolutions (e.g. tablet, mobile in landscape, etc).
We had this problem already with our old logo, therefore we are using some Quick-CSS (access data in private content).
Could you please have a look and give me some input how the overlapping could be avoided for the new logo?
Hi catchbudapest,
Thanks for giving us admin access, can you try to add this css code in Quick CSS (located in Enfold > General Styling):
@media only screen and (max-width:1024px) {
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
display: none;
}
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
display: block !important;
}
}
@media only screen and (max-width:767px) and (min-width:480px) {
.responsive #top #header .logo img {
max-width: 50%;
}
}
Let us know if you need further assistance :)
Best regards,
Nikko
Hey Nikko,
seems to work, thanks a lot!!
Hi Nikko,
I just noted that the menu text is now somehow more centered and too close to the logo:
before and now.
Strangely this just happend after I changed the logo file but nothing in the Quick-CSS (or at least I just noted it now).
Do you have any suggestion how to bring the menu back to the right side?
Hi,
You’re welcome. :)
Try adding this css code in Quick CSS just above the code I gave before:
#top #header .container.av-logo-container {
padding-right: 0 !important;
}
Hope it helps :)
Best regards,
Nikko
Perfect, thanks! :)
Hi,
Glad that we could help :)
Please feel free to comeback if you need further assistance or if you have questions to ask.
Thanks for using Enfold and have a great day!
Best regards,
Nikko