Hover color on transparent header (homepage only) - Sense theme

Store Design
, , , ,
1

Hello there!

Currently designing a new website using the Sense theme ; not really familiar with css or liquid unfortunately, a real beginner.

I’ve still been able to approximately adapt the header the way I wanted to (being transparent at the very top of the homepage, yet going back to its original colour while scrolling down and on other pages), following a specific tutorial (https://jotting.com/shopify/how-to-make-dawn-theme-header-transparent). Which leads me to two small problems that I can’t seem to solve…

  1. I would like the hover colour on the transparent header to be black (such as in my current submenu or in the footer), but I am not able to find the right line of code to edit or to write. Please note that when the header goes back to its original colour, this works perfectly well, this is just an issue of class with the transparent header I think.

  2. I would like the transition from transparent to the original colour to be progressive and much smoother, such as in the following website for example: https://scarlettgrae.com/

Could anyone please help me/assist me with this?

Preview of the website in its current state: https://ozs15ijrzf4j47kl-60735422711.shopifypreview.com

If needed, I can give access to the code.

Thanks a lot!

2

Hi @sambrbe ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.header__menu-item:hover {
    color: #fff !important;
}

Hope it helps!

3

Hi @LitCommerce !

Thank you very much for your answer, but unfortunately this didn’t work. Would you have another idea to find a way around this?

4

Hi @sambrbe ,

Please send me the preview link, I will check it again

5

Hi @LitCommerce ,

Awesome, thanks a lot!

Here’s the link: https://djsvtj2cn165882e-60735422711.shopifypreview.com

6

Hi @sambrbe ,

Please change code:

.header__menu-item:hover span {
    color: #fff !important;
}

Hope it helps!

7

Hi @LitCommerce ,

Thanks a lot, this works just fine!

1 Like