When I hover over a item within a section, I want to change the colour of the header text.

Store Design
, , ,

Topic summary

A user seeks to change header text color when hovering over footer sections on their Shopify store. After sharing their store URL and password, they receive a CSS solution that successfully changes the “get in touch” text color on hover.

Additional requests resolved:

  • Mega menu navigation: User wants the main menu item (e.g., “Pokemon”) to remain highlighted in purple while browsing its submenu items. A CSS solution makes the main menu active when its submenu is open.
  • Footer sections: User requests the same hover effect for three footer sections. Another CSS snippet successfully applies the color change on hover.

Technical solutions provided:

  • Custom CSS targeting .shopify-section-group-footer-group li.slider__item:hover
  • Navigation active state using .main-nav details.is-open summary > a.main-nav__item
  • Footer hover effect via .footer__main .footer-col:hover h2

All solutions were tested and confirmed working. The user also references a related question in another thread about sub-menu underlining, which received a separate response.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone!

When I hove over the section highlight below, I want the “get in touch” text to change colour - How can I achieve this?

cardboardhouse_0-1746892630008.png
cardboardhouse_0-1746892630008.png618×151 15.3 KB

Thanks a lot!

1 Like
2

Hi @cardboardhouse

Can you share me your store url with that page & password (if applicable) to me check & give you the solution

3

Hey! Thanks for helping.

Sure, it’s https://www.cardboardhouse.store/ and pw is CBH25

4

Let try to add this Custom CSS:

.shopify-section-group-footer-group li.slider__item:hover .icons-with-text__title {
    color: red;
}

you can change color as you want.

the result will be:

BiDealDiscount_0-1746895167181.png
BiDealDiscount_0-1746895167181.png1195×633 54.5 KB

5

Thanks so much! It works.

Are you also able to help with the navigation?

When I am on the megamall navigation, let’s say pokemon, I want it to change colour when im looking through the sub list items

cardboardhouse_0-1746896390551.png
cardboardhouse_0-1746896390551.png1189×373 28.7 KB

Thank you!

6

Look like you want when mega menu open then the main menu item will be active, right?

Is this correct?

BiDealDiscount_0-1746896878673.png
BiDealDiscount_0-1746896878673.png1370×785 162 KB

7

Sorry, it’s hard to describe. Yes, so I want Pokemon to be coloured purple when I’m looking through the list items. Example, when I’m anywhere in the navigation for Pokemon I want it purple.

I.e, example when I’m hovering over a sub list item like Glory of Team Rocket, Pokemon should be active in Purple.

Does it make sense?

8

Actually we can do like when a submenu open then main menu item should be active, not sure it is covering all case you want or not but let try to add this Custom CSS:

.main-nav details.is-open summary > a.main-nav__item {
  color: #E25FF9;
  box-shadow: inset 0 -2px 0 0 currentColor;
}

I hope it works as your expect.

Thanks

9

It’s perfect, thanks so much!!

10

I’m so sorry but I also wont to do the 3 sections in the footer :sweat_smile: - You’ve been so helpful, so don’t feel like you have to!

When hovering these sections, we should have the same result

cardboardhouse_0-1746901197250.png
cardboardhouse_0-1746901197250.png1333×340 51.2 KB

11

Hi @cardboardhouse

let try this custom css

.footer__main .footer-col:hover h2 {
  color: #E25FF9;
}
12

Works perfectly, thank you so much!

13

Hello,

Thanks again for the answer, I have a similar issue here with the sub nav menu, since you were so good fixing this one, if you had the time, it would be awesome if you could also check this one here - Thanks a lot!

14

Hi there,

I leave a coment here. Please take a look to try it