How can I change a specific word color in the Empire theme menu?

Store Design
, ,

Topic summary

Goal: change only the words “wholesale” and “apply to wholesale” in the Empire theme’s menu to color #F02222.

What was tried:

  • Guidance to inject custom CSS: one reply suggested adding code in theme.liquid after the tag (exact snippet not visible).
  • Another reply provided a base.css snippet targeting selectors like #Details-HeaderMenu-7 .header__menu-item and .mega-menu__link to set color #F02222. This successfully changed colors but affected additional menu items.

New issue:

  • The CSS selector was too broad, turning other menu text red. The requester asked how to restrict styling to only the word “wholesale.”

Latest update:

  • An “updated code” was posted in response (snippet not visible in the thread), presumably to narrow targeting. No confirmation yet from the requester that it solved the issue.

Notes:

  • CSS (Cascading Style Sheets) edits were central, specifically in theme.liquid and base.css.
  • Screenshots were provided to illustrate the menu items before/after and the unintended styling of other items.

Status: unresolved/ongoing. Awaiting confirmation whether the updated, more specific CSS fixes only “wholesale” without affecting other links.

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

Hello,

I know this question has been asked several times but I am not having success following others’ answers. I am using the Empire theme and would like to change the word “wholesale” and “apply to wholesale” to color #F02222. I don’t have this theme published yet but below is a screenshot and a link to the unpublished version. I am hoping to show this to my client tomorrow so any help would be appreciated.

Screenshot 2024-02-01 at 5.18.02 PM copy.png
Screenshot 2024-02-01 at 5.18.02 PM copy.png2880×1800 706 KB

https://7j6njh1v2ftbltz6-64172556527.shopifypreview.com

Thank you,

Sarah

2

Hi @SBrymer

Please add this code to your theme.liquid file, after element in Online Store > Themes > Edit code
3

Hello @SBrymer :waving_hand:

In Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

#Details-HeaderMenu-7 .header__menu-item,
#Details-HeaderMenu-7 .mega-menu__link {
    color: #F02222;
}

The result

Screenshot 2024-02-02 at 11.03.32.png
Screenshot 2024-02-02 at 11.03.32.png1129×198 49.3 KB

Hope that helps!

4

Thank you so much!

5

Thank you !!!

1 Like
6

Thank you Dan. I just realized though that it is also turning some other words red besides wholesale. Is there a way just to specify the word wholesale?

Screenshot 2024-02-02 at 9.02.53 AM.png
Screenshot 2024-02-02 at 9.02.53 AM.png2880×1800 521 KB

7

Update code
8

You are welcome :slightly_smiling_face: