Home Forums Weaver Xtreme Theme Tablet menu font size

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #69131
    cynical
    Participant

    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.

    #69132
    scrambler
    Moderator

    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

    #69133
    cynical
    Participant

    Thanks.

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

    #69134
    scrambler
    Moderator

    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%;}

     

    #69135
    cynical
    Participant

    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.

    #69136
    scrambler
    Moderator

    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

    #69137
    cynical
    Participant

    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.

     

    #69138
    scrambler
    Moderator

    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;}

    #69139
    cynical
    Participant

    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.

    #69140
    scrambler
    Moderator

    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

    #69141
    cynical
    Participant

    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.

    #69142
    scrambler
    Moderator

    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)

     

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.