Setting different Font Color for Mobile VS Desktop View

12 0 1

The header on my site is yellow, so I would like the menu tab font to be in Black to pop. I can do this on Desktop, but on mobile, the menu is pushed into a sidebar, which when selected is black, and the black text blends in. If I change the text to white, then it is fixed on mobile but shows as white on my desktop against a yellow header background. 

How can I set my header menu font to be BLACK on desktop but WHITE on mobile? Is that possible? It is currently white on mobile and desktop. If I could figure out how to get my mobile menu out of the sidebar and onto the yellow header then they could stay the same color as well... Either option would fix my issue. Thanks!

Reply 1 (1)

Shopify Partner
2138 614 491

Hey @intmotorsports


Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

@media only screen and (min-width: 990px) {
    .navmenu-link.navmenu-link-depth-1 {
        color: black !important;


Screenshot is for reference only, the correct code to paste is the one shown above.



Was I helpful?

Buy me a coffee


Need help with your store? or check out the website
Check out our interview with Shopify!