Mobile menu typography

[valeriashapes]

Hello Experts,

Someone can help me with the typography of mobile menu? I've set a Muli font for headings and navigation and from desktop I can see it but from mobile I see another font. Broadcast theme. 

website: www.shapesdecor.com

Thank you! 

[topnewyork]

Hello, @valeriashapes 
1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

@media (max-width: 768px){
  font-family: Muli, sans-serif !important;
}

@media (min-width: 769px) {
  font-family: Muli, sans-serif !important;
}

 Thanks! 

[valeriashapes]

Hello there,

I think that if better if set a code that says the mobile menu should be the same heading font, so I can change it automatically, now it's set to body font!

Thank you

[topnewyork]

@media only screen and (max-width: 768px) {
  font-family: Arial, sans-serif; /* change font family as per your choice */
}

[rajweb]

Hey @valeriashapes ,

To fix the mobile font issue:

1. Ensure the Muli font is correctly loaded in your CSS.

2. Add this CSS for the mobile menu:

@media (max-width: 768px){
  font-family: Muli, sans-serif !important;
}

@media (min-width: 769px) {
  font-family: Muli, sans-serif !important;
}

Add the CSS in your Shopify theme by:

Edit Code: Go to Online Store > Themes > Actions > Edit Code. Open assets/theme.css or style.css and paste your CSS at the bottom.

Result:

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[valeriashapes]

Hello Rajat,

I think that if better if set a code that says the mobile menu should be the same heading font, so I can change it automatically, now it's set to body font!

Thank you