Dawn theme change menu color mobile version

Store Design

Topic summary

Changing the mobile menu link color in the Shopify Dawn theme. The store owner shared a password-protected preview link and noted desktop menu color/size are already customized, but mobile menu color needs changing.

A proposed fix was a CSS snippet using a media query (max-width: 749px) targeting mobile menu drawer links and setting their color to red with !important, to be added at the end of base.css. Technical note: a CSS media query applies styles only when the screen width meets the specified condition.

After applying the snippet to base.css, the store owner reported no visible change on mobile. The issue remains unresolved, and the thread has no confirmed cause or alternative solution yet. Code snippet is central to the discussion. The conversation is ongoing with an open question about why the CSS does not take effect.

Summarized with AI on February 14. AI used: gpt-5.
1

Hello,

I have this website https://carolinapicklecompany.myshopify.com/

password pickle

I managed to change the color and size for desktop, but how do I change the mobile version menu color?

Thanks for your help.

1 Like
2

@urbantis

@media only screen and (max-width: 749px) {
a.menu-drawer__menu-item.list-menu__item.link.link--text.focus-inset {
    color: red !important;
}
}

Add this code in the bottom of base.css file

3

Thanks for your reply, unfortunately it’s not making a change in mobile version, I added it at the end of base.css, what could be happening?