Tablet menu font size

[cynical]

Is there a straight forward configuration for changing the font size of the primary menu on tablets in Xtreme? The font size that is good for desktop is horribly large for a tablet.

I’m OK with CSS options, and if going that route, would like to see the right way the center the menu on tablets.

[scrambler]

Yes, this is easily done with CSS.

Give us a link to your site so we can be sure of the proper CSS to use

[cynical]

Thanks.

Site: http://test.cynical.ws/

[scrambler]

Add the rule below to the theme Global Custom CSS Rule box with the value you like

.is-mobile #nav-primary li {font-size:80%;}

 

[cynical]

Hmmm. Did not work (my tablet is a Samsung S6, Chrome browser).

I also tried a 30% setting, just to be sure, and there is no change.

[scrambler]

Are you seeing the Mobile menu on the tablet, or the regular menu.

If you are seeing the regular menu, then the rule I gave you does nothing as it is meant to apply on mobile.

If that is the case, this also means your tablet has a high enough display resolution that it can show the desktop menu.

If so and you want to reduce the menu item size, then you need to decide what you want between the two alternative.

Keep the same size on desktop no matter how big or small the browser is, but reduce the size on Android and Ios, if so change the rule to

.is-android #nav-primary li, .is-ios #nav-primary li {font-size:80%;}

Or decide you want to reduce the size when the browser gets under a certain width regardless of the device (desktop or mobile), in which case change the rule to

@media (max-width:1100px) {#nav-primary li {font-size:80%;}}

And find the width threshold that works for you

[cynical]

I believe I’m seeing the mobile menu because it appears to be left justified on the tablet, centered on the desktop.

When I change Text Font Property in Primary Menu Bar, the tablet font size does change. When I would inspect the source, I was wondering if the overriding font specification was at play.

 

That being said, the .-s-android …. trick worked, though on Andoid there is this weird transition as it (a) shows the huge menu font, then (b) it shrinks down as the CSS definition takes effect.

 

[scrambler]

Let us backtrack for a second.

If you see the hamburger menu on the tablet that expands into a vertical slide open menu , and if you want to change the font there, then my first rule was good, but may need !important

Try that rule below and if the mobile slide open menu item size does not change, post back with the rule in place

.is-mobile #nav-primary li {font-size:80% !important;}

[cynical]

On the tablet, I get the regular menu (albeit left justified) when defaulting the the set font. No hamburger (on my phone, I get the hamburger).

The 2nd fix (.is-android) worked on the Android tablet. That being said, the apparent “left justification” of the menu with the larger font may just be an optical illusion.

My guess is that Xtreme is interpreting the Samsung S6 … 1600px in portrait … as a desktop and thus displaying the large font in the absence of the .is-android CSS directive.

[scrambler]

So it is as I mentioned in my second set of suggestions. Your tablet is considered as a desktop, and so the two choices I gave you are the only one available.

The delay with is-android and is-ios, is linked to the delay in identifying the device, nothing we can do there.

The @media rule based on the screen size should be instant. Just because the tablet has a 1600px screen does not mean that this is the browser resolution, so you may want to try the @media rule with various width and see what is the smallest width that will trigger the rule

[cynical]

Thanks. The @media rule works best and I’ll continue to twiddle with that.

If possible, please keep this ticket open for a few days in case there is a follow-up.

[scrambler]

You can also check the article below (scroll down to responsive text), if you want to experiment with adding some level of scaling to the text based on browser width.

Responsive Sizing: Two little known CSS properties – Weaver Xtreme Guide (weavertheme.com)

 

[Author]

Posts