Solved

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

msjogren1
New Member
7 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
300 86 111

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

 

 

View solution in original post

Reply 1 (1)

Spac-es
Shopify Partner
300 86 111

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