How can I apply dropdown menu effects to homepage products?

Store Design
,
1

hi, on my website https://smartlitterco.com/ on the dropdown menu with the headers, I click them and they underline and fill and highlight in #FFBD03 hex and I would like to have that on my homepage products as well if that is possible so when someone clicks the Smart Litter 1.0/2.0 product it has the same effect as the dropdown menu. thank you.

2

@SmartLitter , Hope you are doing well.

Could you please share where you want to keep the hover effect? share the screenshot

3

Hi @SmartLitter

Do you mean the product featured in the home page?

like this.

Made4uoRibe_0-1707245495617.png
Made4uoRibe_0-1707245495617.png480×263 16.9 KB

If it is check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.archer-card__text h3:hover {
    text-decoration: underline;
    text-decoration-color: #FFBD03;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

Oh, im not sure if you want the double line. Its on your header menu.

Made4uoRibe_0-1707245630063.png

5

I will check as soon as my laptop charges if it worked or not, but yes just like that on the two products on the homepage. also the black bar line is embedded across the entire theme i believe. if you know how i can get rid of all of them across the entire website that would be so helpful.

6

you want to get ride of the black line?

Check this one. Same Instruction.

.header__menu-item:hover span {
  border-bottom: none;
}

And save.

Result:

Made4uoRibe_0-1707249627429.png
Made4uoRibe_0-1707249627429.png386×183 8.4 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

when i hover over the product, the text doesn’t fill yellow. i was wondering if it is able to fill yellow like this. also is there a way the footer can be the same as the header?

8

well the png isnt allowed but if you click the 3 lines in the top corner and you hover over the dropdowns or click they fill yellow.

9

Same Instruction.

.header__menu-item:hover span, li.site-footer__linklist-item a:hover {
  color: #FFBD03;
}
.archer-card__text h3:hover {
    text-decoration: none;
    color: #FFBD03;
}

div#shopify-section-sections--17280980779259__header .list-menu__item:hover {
  text-decoration: none !important;
}

And Save.

Made4uoRibe_1-1707258019409.png
Made4uoRibe_1-1707258019409.png593×167 12 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!