Setting different Font Color for Mobile VS Desktop View

intmotorsports · ‎05-22-2024

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!

https://motolifestyle.net/

ThePrimeWeb · ‎05-22-2024

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.

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

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? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Setting different Font Color for Mobile VS Desktop View

Setting different Font Color for Mobile VS Desktop View

☕Buy me a coffee☕

Community Blog Articles