How do I fix a logo overlap on a Zest theme sticky header?

Store Design
1

Hello,

I can’t figure out how to fix the overlap of the logo on the sticky header. I’m using Zest theme.

Thank you

overlap.png
overlap.png1440×1275 93.1 KB

2

Hi @Commercehunt
Please share your store URL so that I can provide you with the exact code

3

Hi @Commercehunt

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

PageFlyHenry_0-1713193876011.png
PageFlyHenry_0-1713193876011.png1365×651 47.6 KB

.f-mobile-nav__inner { margin-top: 40px !important; }

Hope that my solution works for you.

Best regards,

Henry | PageFly

4

https://aurorastones.com/ Thank you

5

Thank you for your help but it looks like my code doesn’t match the above code , my store: https://aurorastones.com/ Thank you

6

Hi @Commercehunt

Try adding below code to end of “site-nav.css”

.f-mobile-nav__inner {
    padding-top: 2rem;
}
.f-mobile-nav .site-logo {
    height: 10rem;
}
.site-logo--image.site-logo--mobile.hidden.md-down\:block img {
    max-height: 9rem;
    width: auto;
}

Please hit Like and mark it as solution if this helps