How can I insert a second logo for my transparent header on my site?

Store Design
1

Hello,

For my site I have made my header transparant and when scrolling a white sticky header by following these instructions: https://jotting.com/shopify/how-to-make-dawn-theme-header-transparent. This has worked perfectly, the text automatically switches to black. However, there is no option to switch the logo to another one/colour when switching from the transparent to the white logo. In the comments they tell you: “you would need to create a second logo field and add a switcher so when transparency is on show the second, when it’s not, show the original, then you need to do a bit of JavaScript to switch between.”

I thus need the ability to insert a second logo.

I hope somebody will be able to help me. Thank you so much in advance.

Greetings,

Mel

Store link: https://5cep3bnuqzoeikzi-62119084228.shopifypreview.com

2

Hi there!

There are a few different ways to accomplish this, but here is the easiest method, and the best part is that you don’t need to add any Javascript.

  1. Upload a black version of your logo to the assets directory in your theme.

  2. Add the code to display the black version of your logo right below the white version. Here is what the resulting html should look like, but the img src should reference the URL for the black logo uploaded in step 1:

    valiermedia_0-1662575698414.png
    valiermedia_0-1662575698414.png1839×537 146 KB

  3. Add the following CSS to your theme stylesheet:

.template-index .site-header-transparent .header__heading-logo:nth-of-type(2), .template-index .header__heading-logo:nth-of-type(1) {
	display: none !important;	
}
.template-index .header__heading-logo:nth-of-type(2), .template-index .site-header-transparent .header__heading-logo:nth-of-type(1) {
	display: block !important;	
}

This should take care of it, I just tested it on your site to confirm. Note that you will likely need to test and optimize for mobile devices (this should be done after every major CSS edit).

If you run into any further issues, feel free to shoot me a DM!

3

Dear Valier,

Thank you for response! I added my logo to the assets directory:

mel999_0-1663149100493.png
mel999_0-1663149100493.png2516×1048 164 KB

Could you help me a bit more with step 2? In header.liquid I found this piece of coding but I don’t know where to paste the url of my second logo:

mel999_1-1663149152708.png
mel999_1-1663149152708.png1940×1228 344 KB

Hope you are able to help!

4

Sure!

I would add the second logo tag right after line 385.

5

Dear Valier,

Thank you so much for all the help first and foremost. I really really appreciate it.

Would it be possible for you to give me a little more precise instructions as I am trying to find my way but have little to no experience with coding. I hope you are able to help me further.

Greetings,

Mel