Font colour change only happening on desktop, not mobile

Store Design
, , , , ,
1

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

2

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

3

Hi @unadiamond

Please share the page facing the issue :heart:

Best,

Daisy

4

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

5

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