My logo is overlapping with the Menu on mobile view. Any suggestion on how to fix? Using ZEST theme.
Topic summary
A user reports their logo overlapping with the menu in mobile view while using the ZEST theme.
Two solutions were provided:
-
JavaScript approach (Moeed):
- Navigate to Online Store → Edit Code → theme.liquid
- Add custom code above the
</body>tag - Includes a screenshot showing the expected result
-
CSS approach (Made4uo-Ribe):
- Go to Online Store → Themes → Asset folder
- Open site-nav.css file
- Add CSS code at the bottom targeting
.f-mobile-nav .site-logowithheight: 15rem; - Also includes a visual result screenshot
Both contributors requested the original poster mark their response as the solution if it resolves the issue. The discussion remains open pending confirmation of which fix worked.
1 Like
Hey @Jessieo777
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
Hi @Jessieo777
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the site-nav.css
Then place the code below at the very bottom of the file.
.f-drawer__content .f-mobile-nav .site-logo {
height: 15rem;
}
And Save.
result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like