Font colour change only happening on desktop, not mobile

[unadiamond]

Hi! 

I have selective menu colours on desktop (ie some pages have green nav text, others have beige) to maintain contrast and legibility. 

Unfortunately this change isn't coming through on mobile. Can someone please help me understand why this is happening and how to please fix it? Thank you!

My website is unadiamond.com

[suyash1]

@unadiamond  can you please share the page link where you are facing this issue?

[unadiamond]

of course! a good example is https://www.unadiamond.com/pages/contact - the burger menu on mobile as well as the text within it is all beige on mobile, and green on desktop

[DaisyVo]

Hi @unadiamond 

Please share the page facing the issue ❤️

Best,

Daisy

[DaisyVo]

Hi @unadiamond 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

Here is the result:

/* Desktop-specific styles */
@media (min-width: 768px) {
    .nav-text.green {
        color: #00ff00; /* Example green */
    }
    .nav-text.beige {
        color: #f5f5dc; /* Example beige */
    }
}

/* Mobile-specific styles */
@media (max-width: 767px) {
    .nav-text.green {
        color: #00ff00; /* Same green for mobile */
    }
    .nav-text.beige {
        color: #f5f5dc; /* Same beige for mobile */
    }
}

I hope this helps

Best,

Daisy