Good morning,
Looking at my site from my mobile, I encounter a series of problems.
The logo is cut off at the bottom and the menu does not appear as a mega menu.
Furthermore, there are some separators that I did not insert.
I’ll leave you a series of photos.
https://prnt.sc/4W6UEoT6k7c6
https://prnt.sc/ImlgFo-Wts3Q
https://prnt.sc/lICQRmDEequD
https://prnt.sc/GWZyQwXxtJj2
https://prnt.sc/odeSvfriybrc
https://prnt.sc/Bc4oW3poilVV
I hope you can help me
Mariarita
Hey Mariarita,
To adjust the logo and remove the mobile menu borders try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
@media only screen and (max-width: 767px) {
.logo img, .logo svg {
top: -1px;
}
.html_av-overlay-side-classic #top .av-burger-overlay li a {
border-bottom-style: none;
}
}
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
Unfortunately the mega menu will not show for mobile devices, as there is not enough room for it to show.
Best regards,
Mike
Thank you, unfortunately the logo still doesn’t look good, despite the CSS you had me add
Hi,
Thank you for the update.
We adjusted the css code a bit. Please try it again and make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings afterward.
@media only screen and (max-width: 767px) {
#top .logo img,
#top .logo svg {
top: -1px !important;
}
.html_av-overlay-side-classic #top .av-burger-overlay li a {
border-bottom-style: none;
}
}
Best regards,
Ismael
Okay, thanks. The problem has been resolved