How to change logo on scroll? DAWN THEME

Technical Q&A
, ,
1

Hi there!

How do you change the wordmark / logo on scroll in the theme Dawn?

My wordmark/logo is currently white (titled wordmark-white.png in content), but I’d like it to switch to the burgundy/red version (wordmark-red.png) when you scroll down the homepage or navigate to any other page. In other words, I only want the white wordmark to appear when someone is at the very top of the homepage.

Site link: karliekarlo.com

5

Do you have a code for this? Thank you!

8

Thanks for sending this, but it didn’t work unfortunately.

10

Sure, if you have any other inputs please let me know!

11

Hey @RebekkaBavnild

The code which you added previously from the above reply, keep that code. Don’t remove it and additionally add my code

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account.header--has-localizations img.header-logo.logo-red {
    display: none !important;
}
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account.header--has-localizations img.header-logo.logo-white {
    display: block !important;
}
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account.header--has-localizations.scrolled img.header-logo.logo-red {
    display: block !important;
}
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account.header--has-localizations.scrolled img.header-logo.logo-white {
    display: none !important;
}
</style>

RESULT:

image
image1909×912 280 KB

image
image1906×910 274 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

12

Hi Moeed!

You want me to do the 3 steps above again and then add your code to the theme.liquid?

Will this also work when scrolling back up and on the other pages?

Thanks!

13

That is correct, because the code I provided you is based on the previous code which you added.

Best,
Moeed

14

I just tried it all out, but it didn’t work. Nothing changed unfortunately :frowning:

15

Did you first add the previous code from 1st reply? I don’t see it on your website at the moment.

16

I was working in a duplicate theme, not my live one. I followed the three steps exactly as instructed, and then I added your code to theme.liquid. Nothing changed, super odd.. Maybe something is incorrect in step 1-3?

I’ve been trying everything for hours. Sometimes I get really close, but there’s always something wrong. At one point, I had it working on the homepage, but not on the other pages. Other times, it worked when scrolling down but not when scrolling back up. Another time, both wordmarks were showing on top of each other. It feels like every fix either creates a new issue somewhere else or nothing happens at all.

17

I tend to recommend solutions which do not require editing theme code.
Avoiding theme code edit will make your theme version updates easier.

Yes, generally, a proper way is to include two logo images in your HTML and then show either one or another on scroll. This would require theme code edit.

In this case (logo is the same, just different color) there is a way to reach your goal without theme code edits.

What you should try:

  1. Set your logo to the red image.
    This is also better for SEO/AIO – if they serve their output on white background, white logo would not show;

  2. On your homepage, add a “Custom liquid” section at the bottom of the “Template” area.
    Because it’s inside “Template” area, it will only render on the page which uses this template – meaning Homepage only;

  3. Paste this code into “Custom liquid”:
    The code will “brighten up ” logo to white if the page is not scrolled/at the top.

<style>
.section-header:not(.scrolled-past-header) .header__heading-logo {
  filter: brightness(10);
}
</style>
18

WOW you are the best. It worked perfectly !! THANK YOU. Is it possible to trigger the color change when the “SHOP” dropdown menu is opened/hovered also?

19

Sorry, should’ve noticed this myself – yes, of course, just use this extended code instead:

.section-header:not(
  .scrolled-past-header, 
  :has([open="true"], .menu-drawer-container[open])
) .header__heading-logo {
  filter: brightness(10);
}

The code basically means:
if header is not scrolled and does not have open submenu or open drawer, then brighten up the logo element.

20

Amazing. Thank you so much, I appreciate it!

21

Hey Tim! Back again - I just noticed a vague pink outline around the logo letters on the mobile version of the homepage. Any idea where that’s coming from or how to get rid of it? Thanks so much!

IMG_1901
IMG_19011090×189 38.2 KB

22

I do not quite see it in my browser, but probably the image is not brightened enough.

Because the color is not completely flat and the edges are antialiased, especially after resizing (theme code does it) there will be an outline of a different tint, like in this screenshot (contrast it bumped to better illustrate):

Screenshot 2026-07-03 at 6.55.29 PM
Screenshot 2026-07-03 at 6.55.29 PM1376×331 9.75 KB

I’d try increasing the parameter, like this:

filter: brightness(20);

And if this does not help, then maybe try something like

filter: saturate(0) brightness(100);
23

Saving the day as always, thanks Tim! Adding the saturate(0) worked perfectly.