Highlighting a Word in Red in My Submenu

Store Design
, ,
1

Hi everyone,

I’m working on customizing my Shopify store using the Dawn theme, and I’ve run into a bit of a challenge. Here’s the situation:

I want to make just one word in my header submenu appear in red. It’s not in the main menu but in one of the dropdowns under a menu item.

The tricky part is figuring out how to target that specific word without affecting the rest of the menu or breaking the design. I’ve looked through the settings, but I don’t see an obvious way to achieve this directly.

If you’ve ever customized your menu like this or have any tips for working with the Dawn theme, I’d love to hear your advice!

Thanks in advance for your help! :blush:

Sans titre.png
Sans titre.png1333×479 135 KB

2

Go to your online store → edit code - base.css file
and pate this code in the top of base.css file

a[href="/en/collections/editions"] {
    background: red;
}

AsadMahmood_0-1733254089177.png
AsadMahmood_0-1733254089177.png1548×742 218 KB

3

Thank you ! And what if I want just the text in red ?

4

replace the code with this one

a[href="/en/collections/editions"] {
    color: red;
}
5

I’m sorry to tell you this, but none of what you gave me works. Can you tell me what kind of details you need to help you?

6

were you able to find base.css file ?

7

Yes I’m in actually

8

paste this code in start of file

a[href="/en/collections/editions"] {
    color: red !important;
}

save the file and preview

9

worked ?

10

It works, but I have another problem that has appeared.

Sans titre.png
Sans titre.png744×477 263 KB

11

paste this in base.css file as well

ul#HeaderMenu-MenuList-3 {
    background: #fff;
}

AsadMahmood_0-1733257436995.png
AsadMahmood_0-1733257436995.png1673×763 73.1 KB

12

Great, it works! Thank you! Unfortunately, the French version of the site is not affected by this change.

13

Don’t worry
for that paste this code in base.css file as well

a[href="/collections/editions"] {
    color: red !important;
}
14

It works, but now the mobile menu has no white background, just like the desktop site earlier. I’m sorry

15

use this code for that

.menu-drawer__navigation-container {
    background: #fff !important;
}
16

Thank you so much! Everything works perfectly. Have a great day!

17

happy to help you
mark the solution as accepted if it worked for you