Header Menu Item Hover Effect

Store Design
, ,
1

Hi,

The standard hover effect for a menu item in the header is to underline the text, I wanted to remove this underline effect and make the text change color instead. The other effect I changed is that when a menu item is clicked it remins highlighed in the colour (normally it would be underlined). The first effect is working fine, however, only some of the menu items have the colour changed when clicked, others just revert back to the normal colour. For example, if you hover on “Shop All”, the colour of the menu item changes to gold, if you then click it, as the user is taken to the shop all page, the menu item remians gold. If however you select the “Brackets” menu item, although it changes colour when you hover over it,when you click it and go to the page, the colour reverts back to white when it should stay gold. Please can someone help me figure this out. Link to wesbsite is: https://www.thecountryhomecollection.co.uk/. Hopefully I’ve explained it well enough.

Thanks

2

Hi @TamsinNewbie :waving_hand: it looks like this class .header__active-menu-item is not being applied to the internal span tag of the links.

If you customized the navigation code you may want to try a file rollback, or even see if there’s a new version of the theme that does not have that issue and transplant to relevant code among themes.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code#roll-back

Otherwise a theme customization is needed.

If you need this quick fix customization then contact me by my email for services, or if you have access private message by clicking here (sloooower).
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Hi Paul,

I think it’s something to do with the below code but I’m not sure where I’m going wrong:

.header__menu {
padding: 0 1rem;
}

.header__menu-item {
padding: 1.2rem;
text-decoration: none;
font-size:13px;
}

.header__menu-item:hover {
color:#C2B7AC;
}

.header__menu-item span {
transition: text-decoration var(–duration-short) ease;
}

.header__menu-item:hover span {
color:#C2B7AC;
}

details[open] > .header__menu-item {
color:#C2B7AC;
}

details[open]:hover > .header__menu-item {
text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
transform: rotate(180deg);
}

.header__active-menu-item {
color:#C2B7AC;
}

.header__menu-item:hover .header__active-menu-item {
text-decoration-thickness: 0.2rem;
}

4

Just as some added info, when I inspect the “Shop All” menu item after it’s been clicked (this one works correctly and stays gold), I can see the .header__active-menu-item element. However when I click on the other menu items and then inspect them, the .header__active-menu-item element is missing for some reason.

5

Figured it out. The menu items were all linked to product collections. Some worked some didn’t. I deleted the collections that didn’t work, re-created them, and re-added them to the menu and deleted the old ones and it fixed the problem.