assign hover color for store name, home, drop down pages under home, cart, & search icon

[msjogren1]

hi there,

https://longtimefrienddiscount.myshopify.com/

1. i successfully created a hover color for menu drop down but i would like to get rid of the underline that appears when the cursor moves to the drop down options.  

2. i would also like to make each linked page on the menu drop down a different color instead of all the same yellow.

3. i would like to assign different hover colors for the store title, the cart icon and the search icon as well. 

[Spac-es · Accepted solution]

1. To remove the underline, add the following code to your base.css file:

details[open]:hover > .header__menu-item {
  text-decoration: none !important;
}

Result:

2. To edit the color of the hover effect in this case, they should all be the same across the three. It can be done as you request, but it would involve adding HTML to the source code, which is a bit complex. However, if you want, you can change this default color in those three elements. Add the following code to your base.css file:

a.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset:hover {
  color: cornflowerblue !important;
}

Result:

3. To add hover color effects to these elements: title, search icon, and cart icon, you should add the following code to your base.css file:

/* Title */
a.header__heading-link.link.link--text.focus-inset:hover span {
  color: green !important;
}
/* Search Icon */
summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle:hover svg {
  color: darkred !important;
}
/* Cart Icon */
a#cart-icon-bubble:hover svg {
  color: darkblue !important;
}
/* Home Text */
summary.header__menu-item.list-menu__item.link.focus-inset:hover {
  color: goldenrod !important;
}

Result:

[msjogren1]

hi. this code you offered works great but i noticed the color changes on "home" and the drop down words do not show on mobile preview.     in order for the colors to also show on mobile do i need additional code?

[Spac-es]

I didn't get what you meant when you said this: 'I noticed the color changes on "home" and the drop-down words don't show on mobile preview.'

Also, the menu looks different on mobile compared to PC, so the previous code won't work on mobile devices anyway. Anyway, the 'hover' effect is commonly used on PCs because it only works when the mouse hovers over the element, but it doesn't make sense to implement this function on mobiles.