How to change the color of the mobile menu text only ?

New Member
3 0 0

Hello everyone and thank you for reading us,

We have a major problem on our website: www.cortenplus.com
We use the Debut Theme.

On a computer, the header appears in blue with the navigation text in white.
On mobile, the menu has a white background but the text of the menu is white too! I would like to put the text of the mobile menu in black, but keeping the one on computer in white.

When I try to change the color, it also changes on the computer version.

Which code should I enter in the css?

Looking forward to reading you,

Regards,

Camille Ferber

0 Likes
Shopify Partner
1838 173 565

Hi Camille Ferber

You are looking for CSS media queries which are already pre-defined as SCSS mixins in your Debut theme SCSS. These are the available ones:

$narrowscreen: 'narrowscreen';
$small: 'small';
$medium: 'medium';
$medium-down: 'medium-down';
$medium-up: 'medium-up';
$large: 'large';
$large-down: 'large-down';
$large-up: 'large-up';
$widescreen: 'widescreen';

Of interest for you, would be the 'medium-down' which is generally for devices such as tablets and phones.

Now look up the CSS class where you made that change (but it affected all @media sizes) and add this mixin:

.someClass-iwanna__change {
  color: white;

  @include media-query($medium-down) {
    color: black;
  }
}

That should do it.

Hope that helps!

I turn coffee in to code - since 1998
1 Like
New Member
3 0 0

Thanks a lot Karl, everything worked! God bless you!

0 Likes
Shopify Partner
1838 173 565

Thanks and welcome :)

I turn coffee in to code - since 1998
1 Like
Highlighted
New Member
2 0 0

Hi Karl,

I am having the same issue for Turbo theme on site - https://stoneandrock.com.au/

Can you please explain how to make the necessary change?

Thank-you

0 Likes