Blue color on hover in dropdown menu, Mode theme

Store Design

Topic summary

Goal: Change nested dropdown (submenu) text hover color to #08BDE8 in a Shopify “Mode” theme.

Implemented fix: Added CSS in theme assets targeting specific submenu IDs:

  • #NavigationTier2-1 a:hover, #NavigationTier2-2 a:hover, #NavigationTier2-3 a:hover { color: #08BDE8; }
    This worked across menus.

Edge case resolved: One item (“Ganar Dinero” under “Ganar Con Nosotros”) didn’t turn blue because it was set as a highlighted link, which overrode the hover style. Removing the highlight restored the hover color.

Alternative, more general approach: Use a selector that covers all nested menu links without ID-specific rules:

  • #main-menu li ul li a:hover { color: #08BDE8 !important; }
    Add to the theme’s custom CSS or style.css to ensure consistent behavior.

Status: Issue resolved; hover color now consistent. Additional general CSS provided for broader coverage.

Summarized with AI on January 17. AI used: gpt-5.
1

Hi,

Can anyone help me with the custom CSS code to make the text turn to 08BDE8 color in the main menu nested items on hover.

Hover over each nested menu option → nested menu option text turns blue (08bde8) on hover.

https://olafilter.com

Mode Theme

1 Like
2

Hi @tasmithola

Try 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:
#NavigationTier2-1 a:hover,
#NavigationTier2-2 a:hover,
#NavigationTier2-3 a:hover {
  color: #08BDE8;
}

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

1 Like
3

Thank you so much!!!

1 Like
4

Hi. The code is working perfectly except in 1 place. On the third menu, Ganar Con Nosotros, the first drop down level, Ganar Dinero, does not turn blue like all the others. Do you have any idea why not?

5

I figured it out. Ganar Dinero was selected as a highlighted link. I removed that and it colors the same as the others.

1 Like
6

Good to know! Your welcome.

7

Hi there,

Certainly! To make the text color turn to #08BDE8 on hover for nested items in the main menu, you can use the following custom CSS code:

#main-menu li ul li a:hover {
    color: #08BDE8 !important;
}

Simply add this code to your custom CSS section in your theme settings or directly in your theme’s style.css file. This will apply the blue color (#08BDE8)(blue prism training) to the text when you hover over each nested menu option.

Hope this helps!

1 Like