How can I change the hover color for each page in the main menu?

Store Design
1

Hi all,

I just wondered if any-one can help with changing the colour of the hover colour for each individual page in the main menu? I have 4 pages linked in my main menu and I want each one to change a different colour when you hover over it.

Thanks!

2

@knowltona Please provide the URL of your store and if it is password protected please share the password too. Thanks

3

Hi,

Please share your store URL and if your store is password protected then also provide password too.

Thank you.

4

The website is https://bazaar-london.com/

Is there a way you could post how to do this without giving out the password?

Thanks!

5

Please add below code in bottom of assets/theme.scss.css file

li.HorizontalList__Item:nth-child(1):hover a.Heading {

color: red; (change color what you want)

}

li.HorizontalList__Item:nth-child(2):hover a.Heading {

color: green;

}

li.HorizontalList__Item:nth-child(3):hover a.Heading {

color: cyan;

}

li.HorizontalList__Item:nth-child(4):hover a.Heading {

color: yellow;

}

Thank you.

6

Thanks so much! I can’t find the location of ‘assets/theme.scss.css’

I’ve attached the files I can see.

Thanks!