How to Add a Hover Effect to the Currency Selector

Store Design
, , , , , , ,
1

Hi, I’d like to add a hover effect to the currency selector in the header. Specifically, when the dropdown menu with the currencies is open, I want the item you’re hovering over to highlight slightly, so it’s clear which currency you’re selecting.

This effect used to be there, but I made some edits to the header, and it disappeared.

I want it to look exactly the same as the hover effect in the footer. You can check it there to see how it should work.

My store URL: https://1049xn-ya.myshopify.com/

Thanks a lot,
Tim

2

Hi @CreatorTim ,

Go to base.css and add the following code :

.disclosure__item:hover {
    background-color: #D3D3D3;
}
3

Now the background gets highlighted, but I only wanted the text to be highlighted.

How can I make it work just for the text?

Also, I only want this effect in the header. In the footer, it already works fine, just not in the header. If you scroll down, you can see how it works in the footer, and that’s exactly how I want it to be in the header as well.

https://1049xn-ya.myshopify.com/collections/all

Thank you,

Tim

4

Hello @CreatorTim ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (min-width: 768px){
body header .disclosure__item .disclosure__link:hover {
    color: skyblue !important;
    transition: all 0.3s ease-in-out;
}
}

Let me know if you need further assistance!

Note : Change the color according to your requirements.

5

Thank you! Got it