Dawn theme header hover logo troubleshooting - urgent

Store Design
, , , ,
1

I’m using the Dawn theme and I want the header logo on the home page to change on hover. This should not affect any other pages or the mobile view. Please help me troubleshoot and customize this ASAP.

webstite: https://offnorth.com/

image
image1376×924 112 KB

2

Hi @Sivadarshan ,

It seems that your request might be a bit conflicting with the current state of your website. Just to clarify, do you mean that you don’t want the logo to change on hover, or is it that you’d like it to change only on the homepage, but not on other pages or the mobile view?

Let me know so I can assist you further!

Best,
Felix

3

You can add this code to your theme.liquid file

{% if template == 'index' %}
<style>
    .header:hover .header__heading-logo { filter: invert(1); }
</style>
{% endif %}

Screenshot 2025-08-21 at 13.59.43
Screenshot 2025-08-21 at 13.59.431920×720 97 KB

4

Hii @Sivadarshan

Step 1: Update your logo HTML

In your header.liquid (inside the logo area), replace your logo code with this:
{% if template == 'index' %}
  <h1 class="header__heading">
    <a href="/" class="header__heading-link link link--text focus-inset home-logo">
      <div class="header__heading-logo-wrapper">
        <!-- Default logo -->
        <img 
          src="(img url)width=200"
          alt="Offnorth Fashions"
          class="header__heading-logo default-logo"
          width="100" height="45">
        <!-- Hover logo -->
        <img 
          src="{{ 'logo-hover.png' | asset_url }}"
          alt="Offnorth Fashions Hover Logo"
          class="header__heading-logo hover-logo"
          width="100" height="45">
      </div>
    </a>
  </h1>
{% else %}
  <h1 class="header__heading">
    <a href="/" class="header__heading-link link link--text focus-inset">
      <div class="header__heading-logo-wrapper">
        <img 
          src="(img url)width=200"
          alt="Offnorth Fashions"
          class="header__heading-logo"
          width="100" height="45">
      </div>
    </a>
  </h1>
{% endif %}

Step 2: Add CSS

Go to `Assets/base.css` (or `theme.css`) and add:
/* Show only default logo by default */
.home-logo .hover-logo { display: none; }

/* Swap logo on hover */
.home-logo:hover .default-logo { display: none; }
.home-logo:hover .hover-logo { display: inline-block; }

/* Disable hover swap on mobile */
@media screen and (max-width: 749px) {
  .home-logo .hover-logo { display: none !important; }
  .home-logo:hover .default-logo { display: inline-block !important; }
}

Step 3: Upload hover logo

  • Go to Settings → Files → Upload files.
  • Upload your second logo (name it logo-hover.png).
  • The code above will automatically load it.
5

Hi , I want the header on hover to be transparent only on the home page. It should not affect any other pages.

6

Hi @Sivadarshan ,
Please take a look at the screenshot below and confirm if that matches the result you want.

image
image1417×418 59.8 KB

If so, you can achieve this with just two simple steps:

Step 1: Click on Customize (see screenshot)
Step 2: Add the following CSS code:

.header:hover .header__heading-logo {
    opacity: 0 !important;
}

to the Custom CSS section (screenshot), then save and check the result.

Let me know if this works for you or if you need further assistance!

Best,
Felix

7

Hey @Sivadarshan,

In order to do the requested changes requires to do the custom code in your theme file.
Could you please share the 4 digits collab code along with the store url in the p/m so that I can take a look and make the requested changes.
Thanks

8

Hi @Sivadarshan ,

I hope you are doing well!

Basically, we need to add a condition using the code. Can you please provide me the image files which you want to keep on hover with collaborative so that I can add the condition on hover I will load the different image and if not it will be the same.