How can I change menu hover color in Horizon Theme?

Ask & Offer

Topic summary

A user seeks to customize the menu hover color in Shopify’s Horizon theme but finds existing documentation unclear or ineffective.

Initial Troubleshooting:

  • Another user suggests changing colors via Customize > Sections > Header > Colors, but this doesn’t address hover states specifically.
  • The original poster clarifies they want menu text to change color on hover (e.g., black text turning another color when hovered).

Solution Provided:

  • After reviewing the preview link, a contributor identifies that built-in theme settings don’t control hover colors.
  • Working fix: Add custom CSS code to Theme Settings > Custom CSS:
.menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active, .menu-list .menu-list__list-item:where(:hover,:focus-within) .menu-list__link, .menu-list .menu-list__list-item[slot=overflow] .menu-list__link[aria-expanded=true] {
    color: #07aab8;
}
  • Users can replace #07aab8 with their preferred color code.

Status: Resolved. The custom CSS successfully changed the hover color as intended.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

I have been searching for a way to change the menu hover color in Horizon? I have seen very little documentation on this, and the one or 2 that I found didn’t seem to work or were at least very unclear.

2

Hey @Transit_Design

Share your store URL and Password if enabled.

Best,
Moeed

3

I currently have the Dawn theme activated. The Horizon theme isn’t live yet because I am still working on building it out.

4

Hi @Transit_Design,

Please follow these steps:

  • Step 1: Go to Customize > Sections > Header > Colors > Edit.

Screenshot
Screenshot850×1440 98.7 KB

  • Step 2: Change color here:

Screenshot
Screenshot706×1244 55.5 KB

If I helped you, then a Like would be truly appreciated.

5

@namphan thank you for the reply, but this doesn’t do anything. I am trying to get the hover color to change on the main menu. For example, I want the menu text to be black, but when you hover over it, the text turns another color. This doesn’t seem to be the solution.

6

Here is a link to my preview:

7

Here is a link to my preview

8

Hi @Transit_Design,

Have you tried changing the color of the ‘Default’ color at step 1?

Or send me the preview link, the link will include ‘.shopifypreview.com’, I will check it.

Screenshot
Screenshot559×173 8.1 KB

10

Here is the link https://oxikzgq7fg8t5f36-10096118.shopifypreview.com

11

Hi @Transit_Design,

I checked and it is currently showing the same color.

If you want to change the color, please go to Customize > Theme settings > Custom CSS and add code:

.menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active, .menu-list .menu-list__list-item:where(:hover,:focus-within) .menu-list__link, .menu-list .menu-list__list-item[slot=overflow] .menu-list__link[aria-expanded=true] {
    color: #07aab8;
}

You can change the color as you like.

If I helped you, then a Like would be truly appreciated.

1 Like
12

Thank you so much. That worked!

13

Hi @Transit_Design,

It’s my pleasure :blush: