Solved

Get rid of hover effect on Header text - Dawn Theme

AmyFallan
Tourist
6 0 1

 

Hi all, 

 

I am trying to make it so the header menu text doesn't have a 'fade on hover' effect which affects the colour. When you go to the home screen currently, the colour of the header logo (Blondie & Blu) and 'Home' are the colour I want the other menus to be.

 

Currently, only when I hover over 'Products', 'Contact' and 'About' will it turn to the right colour. I want to just get rid of the hover, colour changing effect on the other headers.

 

Header example.jpg

 

Thankyou!

Amy

 

https://www.blondieandblu.com.au/ 
P: amy123

 

 

Accepted Solution (1)
David_SHT
Globetrotter
605 125 124

This is an accepted solution.

Hi @AmyFallan 
Just checked and found that your code missed a closing tag.
Please have a look on this image and check your code then add the close tag like the image

Blondie & Blu – Blondie & Blu 2023-09-07 13-40-30.jpg

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

View solution in original post

Replies 9 (9)

David_SHT
Globetrotter
605 125 124

Hi @AmyFallan 

This is David at SalesHunterThemes.

 

Thank you for your question. 
Follow this path:

Themes => edit code => asset => base.css

and add this code to bottom of the file base.css

 

.header__menu-item {
    color: rgb(var(--color-foreground));
}

 

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

AmyFallan
Tourist
6 0 1

Hi David,

 

Unfortunately this didn't work for me. 'Products', 'Contact' and 'About' are still showing with a faded colour until I hover over them.

 

Amy

David_SHT
Globetrotter
605 125 124

This is an accepted solution.

Hi @AmyFallan 
Just checked and found that your code missed a closing tag.
Please have a look on this image and check your code then add the close tag like the image

Blondie & Blu – Blondie & Blu 2023-09-07 13-40-30.jpg

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

AmyFallan
Tourist
6 0 1

Thankyou David! It worked!

What a difference one symbol can make 😊

Kind regards,

Amy

David_SHT
Globetrotter
605 125 124

You’re welcome. I’m so glad that it can be your solution

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

LorenzoMasiello
Shopify Partner
1 0 0

Hi @David_SHT,

 

Could you please tell me how to obtain the same result but for the footer menu? Please see screenshot below:

 

LorenzoMasiello_0-1711294089044.png

 

As you can see the "Contact" item and the Store Address both have this "fade" effect until you hover on them and they show their real color.

 

Please let me know

 

Thank you,

Lorenzo

ZenoPageBuilder
Shopify Partner
1052 203 217

Hello @AmyFallan 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

 

The result

 

Screenshot 2023-09-07 at 09.41.49.png

Hope it helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
AmyFallan
Tourist
6 0 1

Hi Zeno - I can't see the code you have supplied - but the result in your image looks perfect! Let me know 🙂 Amy

ZenoPageBuilder
Shopify Partner
1052 203 217

Sorry, I think I deleted the code by accident. But looks like you have found the right solution for the issue. Hope you the best!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com