[trimictonParticipant]

How do we change the font size (sub-menu) in the top navigation? the standard font size is way too small for my taste, especially when viewed on a smartphone.
Thank you.

[ChristopherModerator]

Hi there,

Please add this code in Customize -> Custom -> CSS:

ul.sub-menu li a {
font-size: 20px;
}

Hope it helps.

[trimictonParticipant]

Hello, this really helped me out. Thank you.

But is it also possible to chance the font-size for the mobile version too?

[RubinKeymaster]

Hey There,

You can target mobile by putting the custom css inside this:

@media screen and (max-width: 480px) {
   ul.sub-menu li a { font-size: 18px; }
}

Hope that helps!

[trimictonParticipant]

Just tested that snippet. Doesn’t work on mobile for me. On a laptop it seems to work (with setting max-width e.g. to 3000 the font gets larger), but it didn’t work on two iPhones 5/6plus (tested with Safari and Chrome) and on 3 Android devices – tested via Browserstack emulation (font stays small with “max-width” tested at 480 and 980px).

Is there another setting I might be missing or something to be activated with the theme? Or do you guys have a different CSS snippet to experiment with? (larger font size in mobile navigation / and further customization of mobile navigation font/look is what I am looking for).

Thank you!

[Kosher KMember]

Hi There,

Simply increase the media query screen size to include larger screensize for the style,

The previous CSS will only be applied on devices with 480pixel screen size which means it won’t work on mobile landscape display which are most likely to be 768px,

You can try adding something like this instead,

@media only screen and (max-width: 979px) {
   ul.sub-menu li a { font-size: 18px; }
}

This article might also help -> http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Have a great day

[Author]

Posts