Hello Shopify community,
Is there a way to have two logos for my header? Right now I have my transparent header enabled for my homepage. The logo for that should ideally be in white, and when scrolling, the sticky header would appear and the logo changes to black.
Hopefully someone can help me with this dilemma. My store is galleryibmarka.com and the password is skiegi.
I am currently using the dawn theme.
Thanks a lot in advance 
@markaib - add this to the very end of your base.css file and check
#template-index .site-header-transparent .header__heading-logo {filter: invert(1);}
Hello @suyash1
Thank you so much for replying with a solution. However, the code still doesn’t work. Is there another way perhaps?
Thank you
This is PageFly - Advanced Page Builder. I would love to give you some recommendations
first to be able to make 2 logos when scrolling and not scrolling, you need the 2nd logo then upload it to shopify and get the url
the second step you go to the header.liquid folder find the keyword “header__heading” then you add the same as on the picture
Hope my solution works perfectly for you!
Best Regards;
PageFly
Wow! Thank you so much @PageFly-Victor it worked!
Unfortunately, this also means that the logo is white for the headers of my other pages. Is there a way to get around this?
Again, thank you so much @PageFly-Victor for helping!
@PageFly-Victor I forgot to mention that this solution works perfectly well for my homepage, but then the header for my other pages become white as well. Thank you so much
you can replace it by
{% if template.name == “index” %}
.header.header--middle-left.page-width.header--has-menu.site-header-transparent .pf_img_sticky{display:none} .header.header--middle-left.page-width.header--has-menu.site-header-transparent .pf_img_nosticky{display:block} .header.header--middle-left.page-width.header--has-menu .pf_img_sticky{display:block} .header.header--middle-left.page-width.header--has-menu .pf_img_nosticky{display:none } {% else %} .pf_img_sticky{display:block !important} .pf_img_nosticky{display:none !important{% endif %}
Thanks @PageFly-Victor it worked again, but so sorry to ask so many questions. The code sadly changed my homepage header to a non sticky header. Otherwise, all my other pages looks perfect!
@markaib - can you add my given css and let me know? I will check why is that not working, it should work will have some small issue
Hi @suyash1 !
Thank you so much for the reply and solution. I did try your code before, and unfortunately it didn’t work. I’ve decided to go with PageFly’s solution on this matter
@markaib - sure no problem, do let me know if you need anything else, you have my email below.
Hi again @PageFly-Victor , it seems that using this code disabled my Tab title as well as my favicon. Do you perhaps have a solution to this ?
I’m seeing it looks like you’ve added the wrong structure. Can you take a picture of where to add the code in theme.liquid?
Hi @PageFly-Victor , I’ve added it here
Yes thank you. Turns out the was missing on the bottom of the code!
Again thank you so much for taking the time out to help me
{% if template.name == “index” %}
.header.header--middle-left.page-width.header--has-menu.site-header-transparent .pf_img_sticky{display:none} .header.header--middle-left.page-width.header--has-menu.site-header-transparent .pf_img_nosticky{display:block} .header.header--middle-left.page-width.header--has-menu .pf_img_sticky{display:block} .header.header--middle-left.page-width.header--has-menu .pf_img_nosticky{display:none } #shopify-section-header{position: sticky; top: 0;} {% else %} .pf_img_sticky{display:block !important} .pf_img_nosticky{display:none !important{% endif %}
I see it worked
Yes 
everything is perfect in the end
