Solved

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

msjogren1
New Member
10 0 0

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.  Screen Shot 2024-02-12 at 1.16.42 PM.png

 

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

Screen Shot 2024-02-12 at 1.20.04 PM.pngScreen Shot 2024-02-12 at 1.19.59 PM.pngScreen Shot 2024-02-12 at 1.19.55 PM.png

 

3. i would like to assign different hover colors for the store title, the cart icon and the search icon as well. Screen Shot 2024-02-12 at 1.12.30 PM.png

Accepted Solution (1)

Spac-es
Shopify Partner
355 103 123

This is an 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:

1.PNG

 

 

 

 

 

 

 

 

 

 

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:

 

9.PNG

 

 

 

 

 

 

 

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:10.PNG

 

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 3 (3)

Spac-es
Shopify Partner
355 103 123

This is an 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:

1.PNG

 

 

 

 

 

 

 

 

 

 

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:

 

9.PNG

 

 

 

 

 

 

 

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:10.PNG

 

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
msjogren1
New Member
10 0 0

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
Shopify Partner
355 103 123

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.

 

pp.PNG

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!