Remove hover effect on header - Craft Theme

Store Design
, , , ,
1

I’m looking for how to remove the hover effect from the main website heading in the header of my shop in the “Craft” theme. I got as far as removing this effect for the menu items with help from another thread, but can’t figure it out for the main title of the site. I just want the words “FORGE AND FORM” to be the colour #FCF8F3 all the time and not be darker when the mouse isn’t hovering over it.

Screenshot 2025-02-27 at 9.59.39 PM.png
Screenshot 2025-02-27 at 9.59.39 PM.png2276×760 172 KB

2

Hey @Cartwright1334 ,

To remove the hover effect on the main heading (“FORGE AND FORM”) in the header of your Shopify store using the Craft theme, you’ll need to modify the CSS. Here’s how you can do it:

Follow these steps:

  1. Online Store

  2. Themes

  3. Customize.

  4. Click on theme Setting > Custom CSS

  5. Add the following CSS:

.header__heading-link {
    color: #FCF8F3 !important;
}

.header__heading-link:hover {
    color: #FCF8F3 !important;
}

Alternative Method:

If your theme doesn’t have a Custom CSS section:

  1. Online Store > Themes > Edit Code

  2. Find base.css or theme.css

  3. Scroll to the bottom and add the CSS code above.

  4. This will ensure that the text color remains #FCF8F3 at all times, without changing on hover. Let me know if you need further help!

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,
Rajat

3

Hey @Cartwright1334

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

4

Hi @Cartwright1334

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

5

Hi,

Thanks so much for your help. I tried this and it didn’t work unfortunately!

Here is the code I added in the same place that removed the hover effect for the menu items:

Not sure if that will help clarify what will work for the site title header (the text FORGE AND FORM).

Thanks for any other help you can provide!

Clare