How to make navigation bar see through on mobile as well

[An_A]

Hello,

Our website on desktop is just how I want it where the navigation bar is see through over the homepage image. However, it has not translated to the mobile. The navigation bar is a solid white instead of being see-through. How can I change it to be the same as desktop? The image below is from desktop, I want the same design on mobile where the navigation font is white and overlayed on the image. Thank you so much!!! Our website is: www.hansandgreta.com. Here is the theme info:

“name”: “theme_info”,
“theme_name”: “Hans & Greta”,
“theme_author”: “Shopifytemplate”,
“theme_version”: “2.0”,

[GemPages]

Hi @An_A ,

Glad to support you today.

You can check out my suggestion below to get your concern resolved.

1. Go to Edit code on Online Store:

2. add my code above the tag on Theme.liquid:

The header show like this when you add my code:

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

[An_A]

Thank you for your reply!

Is there a way to make it grab the white version of the ‘Hans & Greta’ logo as well? I have uploaded both black and white version of the logo. That is how it functions on the desktop. The white logo is on the transparent bar overlaying the picture and then it switches to black when scrolling down and the white background bar appears at that point.

[An_A]

Thank you for your reply!

Is there a way to make it grab the white version of the ‘Hans & Greta’ logo as well? I have uploaded both black and white version of the logo. That is how it functions on the desktop. The white logo is on the transparent bar overlaying the picture and then it switches to black when scrolling down and the white background bar appears at that point.

[GemPages]

Oh, I missing some code to make the logo white when the header is transparent. I updated my code and please re-add to the theme.liquid file:

[An_A]

It worked, thank you so much!!! Appreciate the help!