Shopify Header - Transparent transitioning to different logo and solid background

Store Design
1

Hi everyone,

I have implemented a manual code to have a transparent header initially and then to solidify once you scroll down with a smooth transitioning of 0.2s. It is currently on a non-active theme just for testing.

However, I have a couple of issues with it:

  1. There is a slight edge at the top of the Header that should be transparent (Picture 1)

Picture 1.png
Picture 1.png1143×183 201 KB

  1. When scrolling, the transitioning from transparentto solid is not smooth but rather glitchy

  2. The announcement bar disappears when scrolling (Picture 2)

Picture 2.png
Picture 2.png1561×149 11.4 KB

  1. The font color with transparent header should be white instead of black (Picture 3)

Picture 3.png
Picture 3.png1139×149 140 KB

  1. On mobile, when you click on the menu, the header is still be visible but I want it covered with the menu items when clicking on it (Picture 4)

Picture 4.png
Picture 4.png374×322 61.4 KB

I would be very happy to give access to my shopify if anyone is able to help?

Thank you very much!

Kind regards,

MORA LANA

2

Hello @moralana

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

3

Thanks so much! here is the store: www.moralana.com

Feel free to send a Collaborator Request with Code: 3619.

The code is on the MORA LANA 3.0 THEME (not active). Feel free to work on that one or feel free to dublicate the main theme to work on another solution.

Thank you very much!

MORA LANA