Header Menu Text Color Change ( Shopify Dawn Theme )

[dreamtechzone_5]

Hello Everyone!

I am using the Shopify Dawn Theme. I want to keep the Black Friday menu text red in desktop and mobile mode. Please help me. Thank you in Advance.

Store Url: https://delicious-fruits-vegetables.myshopify.com/

Password: Admin

[Mehran_Ali]

Hi @dreamtechzone_5

You just need to follow these steps:

1. Go to the Online Store
2. Edit Code
3. Find theme.css / base.css

And past that CSS Code:

header.header .header__inline-menu ul.list-menu>li:nth-child(2)>a.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset { color: red !important; }

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

[dreamtechzone_5]

It worked in desktop mode. But not working in mobile mode.

[topnewyork]

Hello, @dreamtechzone_5

1. Go to Online Store
2. Edit Code
3. Find theme.css/base.css file
4. Add the following code in the bottom

a[href="/collections/special-products"] span {
    color: red !important; /* Correct way to make the text red */
}

Thanks!

[dreamtechzone_5]

Hello Sir! Are you there? Please help me. Thank you.

[topnewyork]

@dreamtechzone_5 I have sent you code

Thanks!

[dreamtechzone_5]

Thank you. This code worked in desktop mode. But it is not working in mobile mode. Is it possible to change the color of the menu in mobile mode?

header.header .header__inline-menu ul.list-menu>li:nth-child(2)>a.header__menu-item.header__menu-item.list-menu__item.link.link–text.focus-inset { color: red !important; }

[topnewyork]

Hello,

1. Go to Online Store
2. Edit Code
3. Find theme.css/base.css file
4. Add the following code in the bottom

@media (max-width: 768px) { /* For screens 768px or smaller */
    a[href="/collections/special-products"] span {
        color: red !important; /* Mobile par bhi text red hi rahega */
    }

Thanks!

[dreamtechzone_5]

When I change the text it doesn’t work.

[BrainStation23]

Hlw @dreamtechzone_5
We have gone through your problem and found a solution.
Solution:
You can follow these steps to achieve your result
Go to online store->Edit code->component-menu-drawer.css file

.menu-drawer__navigation ul.list-menu > li:nth-child(2) > a.menu-drawer__menu-item.list-menu__item.link.link--text.focus-inset {
  color: red !important; 
}

[topnewyork]

Try this one

@media (min-width: 768px) { /* For screens 768px or smaller */
    a[href="/collections/special-products"] span {
        color: red !important; /* Mobile par bhi text red hi rahega */
    }

[dreamtechzone_5]

Thank you very much. It worked.

[dreamtechzone_5]

Hello Sir!

The color of the menu under the mega menu is showing red in mobile mode. I just want to keep the black week sale menu text red.