Add background color to specific header text

Store Design
, ,

Topic summary

Goal: highlight a specific header menu item (“Pricing”) with a yellow background in a Shopify store.

Context: The requester could identify the item’s id/class via browser inspection but couldn’t reliably target it in theme.liquid or custom CSS, only managing a global header text color change.

Solution provided:

  • Add custom CSS at the bottom of theme.liquid, just above the tag.
  • Target the specific menu item by its id selector and apply styles, for example:
    • background: yellow
    • color: black
    • border-radius: 10px

Technical notes:

  • CSS (Cascading Style Sheets) controls visual styling.
  • theme.liquid is the main Shopify layout file where global code can be inserted.
  • id/class are CSS selectors used to target specific elements.

Outcome: The “Pricing” item was successfully highlighted; confirmation of success followed.

Media: Screenshots were shared to illustrate the desired and achieved styling.

Open issue: A separate user asked how to target a button labeled “Shop Here” when spaces in the name complicate CSS selection; this follow-up remains unresolved in the thread.

Summarized with AI on December 12. AI used: gpt-5.
1

I want to highlight a header CTA by adding a yellow background, but I can’t find a way to do this anywhere. I can easily find the id and class in the inspection view but I can’t tag it inside theme.liquid nor custom CSS in shopify theme editor.

Screenshot 2023-08-17 130403.png
Screenshot 2023-08-17 130403.png623×197 3.28 KB

I want it to look like this.
The only thing I managed to do was to change the header text color using this code inside theme.liquid:

  2. .header-wrapper *{

  3. color: #ffffff;

  4. }

  5. .global-settings-popup, .header__submenu.global-settings-popup{

  6. border-color: #ffffff !important;

  7. }

But that’s not what I want.

Here’s the link: https://whaleybath.myshopify.com/
Thanks in advance.
Spike

2

Hey @Spike1

Can you tell that which menu in the header you’d like to highlight so that according to that I can provide you with a code?

1 Like
3

Of course. It’s the “Pricing” one!

4

Hey @Spike1

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1692275383420.png
Moeed_0-1692275383420.png1261×912 85.5 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
5

7 hours ago

hi @Spike1

Its SideNode! We will be happy to help you today.

You can try this code: it will be helpful to you

#HeaderMenu-pricing 
    background: yellow;
    color: black;
    border-radius: 10px;
}

If I was able to assist you, please remember to give it a Like and Mark it as the Solution!

Let me know if need further assistance
Regards,
SideNode

6

Thank you so much!!

7

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

8

I have a button named “Shop Here”, dont seem to work to add either _ or . to get a space in css code, but singular words work.