How to stop header colour change on hover? Be Yours Theme

Store Design

Topic summary

A user seeks help preventing header color changes on hover in the Be Yours theme.

Solutions Provided:

  • Dan-From-Ryviu offered CSS code to add to the theme.liquid file after the <head> tag
  • PageFly-Henry provided an alternative solution involving editing the base.css file with specific CSS rules to disable the hover effect

Outcome:

  • The original poster successfully resolved the issue using Dan-From-Ryviu’s code solution

Related Issue:

  • Another user (CharBar93) attempted similar fixes for the Monaco theme but encountered difficulties, specifically with a sticky header on scroll using header overlay
Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

could someone please tell me how I can stop the colour change on the header when hovering over it?

I’ve been fiddling with the settings for hours. I thought it should be something simple.

I’m using the Be Yours theme and this is my URL: https://www.merindahbotanicals.com.au

meld78_0-1710463881617.png
meld78_0-1710463881617.png1920×1080 246 KB

2

Hi @meld78

You can do that by adding this code to theme.liquid after
1 Like
3

Hi @meld78

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

span.header-background,

.header-wrapper>.header:before {

display: none;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like
4

Amazing, thank you @Dan-From-Ryviu that worked. Truly appreciated!

1 Like
5

Thank you. I used Dan’s code and it worked.

1 Like
6

Happy I could help.

7

You are welcome @meld78 :blush:

8

I could not get this to work on Monaco theme. But I am using header overlay.

Sticky header only on scroll up.