How can i change the color of single navigation menu

Technical Q&A
,

Topic summary

A user wants to change the color of a specific navigation menu item (“CLEARANCE SALE”) to red on their Shopify store.

Multiple solutions provided:

  • CSS approach (most common): Add custom CSS code to the base.css or theme.css file targeting the specific menu item with selectors like #HeaderDrawer-clearence-sale or a[href="/collections/sale"] and setting color: red !important;

  • Alternative method: Insert CSS code in the theme.liquid file above the </head> tag

Implementation steps:

  1. Navigate to Online Store → Themes → Actions → Edit code
  2. Locate and open the appropriate CSS file
  3. Add the provided CSS code at the end of the file
  4. Save changes

Multiple responders shared screenshots demonstrating the expected result. The discussion appears resolved with several working solutions offered.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

I want to change “CLEARNCE SALE” color to Red

https://nailzypakistan.com/

IMG_7089.jpeg
IMG_7089.jpeg828×202 9.41 KB

2

Hello @Laiba ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code at the bottom:

a[href="/collections/sale"] {
    color: #ff0000 !important;
}

Thanks

3

Hello @Laiba

Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

#HeaderDrawer-clearence-sale {
color: red !important;
}

result

13.png
13.png397×504 2.93 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4
  • Here is the solution for you @Laiba
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
#HeaderDrawer-clearence-sale {
     color: red !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1724155646033.png
BSSTekLabs_0-1724155646033.png498×482 10.1 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
5

Hi @Laiba

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly