Blank Canvas: Change mobile menu font size?

jahlinmarceta · Member · Jun 20, 2021 at 7:56 pm
Copy link

Add topic to favorites
Hi,

Is there a way to change the menu font size when the website is displayed on mobile?

Best,
Jesper

The blog I need help with is: (visible only to logged in users)
kokkieh · Staff · Jun 21, 2021 at 8:40 am
Copy link
Hi Jesper,

This should do the trick:
```
@media only screen and (max-width : 360px) {
  .primary-navigation a, .woo-navigation a {
    font-size: 16px;
  }
  .primary-navigation .sub-menu .menu-item a, .woo-navigation .sub-menu .menu-item a {
    font-size: 14px;
  }
}
```
You can substitute the values with what you want – it will affect the main and sub-menu items respectively.

Also note that your plan gives you access to both live chat and direct email support for help with questions like this. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact
jahlinmarceta · Member · Jun 21, 2021 at 11:21 am
Copy link
Hi,

Thanks! It works in preview on a desktop browser, but not on mobile. I’ve tried three different browsers. Do you know what the problem might be?

Best,
Jesper
supernovia · Staff · Jun 21, 2021 at 5:38 pm
Copy link
Hi Jesper, which phone are you using? You could try changing the max-width to a wider width, based on your device screen. If it’s 500px instead of 350px, you should be able to target the portrait orientation of most phones.
jahlinmarceta · Member · Jun 21, 2021 at 5:46 pm
Copy link
Hi,

Yes, perfect! Thank you both for taking the time to help me!
jahlinmarceta · Member · Jun 21, 2021 at 5:47 pm
Copy link
Problem solved! Thanks kokkieh and supernovia!
supernovia · Staff · Jun 21, 2021 at 6:56 pm
Copy link
Cheers, @jesperahlin! And sorry about the thread spammer; we took care of that and we’ll close this thread, too, so you don’t get spammed again.

No items found.