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

Store Design
, , ,
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!

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