Help stying title hover in header Prestige

Store Design
1

Good day,

I am trying to add a hover style effect to the header which was native to prestige theme, i don’t know if this style got removed in the theme update but i can’t find it in the costumizer and i don’t know how to do it with CSS.

This is my header:

963d44d5-5161-4d52-ba4222229-d048cec10692.png
963d44d5-5161-4d52-ba4222229-d048cec10692.png1715×495 37.6 KB

This is the desired result:

web-design.png
web-design.png1686×461 68 KB

I tried myself by adding this code to the bottom of css file

ul.HorizontalList.HorizontalList--spacingExtraLoose a:hover {
background-color: #ff87b0!important;
color: #000!important;
}

but this was the result:

3928df1f-3b7a-4248-a5e9-7e08ad3fe4f9.png
3928df1f-3b7a-4248-a5e9-7e08ad3fe4f9.png1715×495 38.2 KB

I would really apreciate some help with this!

Store url: https://donutsole-hu.myshopify.com/

Password: twilye

Thank you very much in advance!

1 Like
2

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

ul.HorizontalList.HorizontalList--spacingExtraLoose a:hover {
background-color: #ff87b0!important;
color: #000!important;
padding: 10% 5% 10% 5%!important;
}
3

hello @NZA

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.HorizontalList__Item:hover .MegaMenu  .MegaMenu__Inner .MegaMenu__Item ul.Linklist li.Linklist__Item a.Link {
	color: #ff87b0 !important ;
}
1 Like
4

@NZA

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

ul.HorizontalList.HorizontalList--spacingExtraLoose a:hover {
background-color: #ff87b0!important;
color: #000!important;
padding: 10% 5% 10% 5%!important;
}

Thanks!

5

Hello @NZA

You can use the below code to get rid of your problem.

Go to Admin Dashboard > Themes > Action > Edit Code > Assets Folder > theme.css

paste the code

.HorizontalList.HorizontalList--spacingExtraLoose a:hover {
	background: #ff87b0 !important;
	color: #000 !important;
	padding: 1rem .5rem !important;
}

Screenshot(9).png

If this post helps you, like this post and marked as accepted solution.