Home Forums Weaver Xtreme Theme auto resize menu font

This topic contains 9 replies, has 3 voices, and was last updated by  scrambler 3 months, 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #53353

    Curtis
    Participant

    I need some help with auto resizing the font on the menu when the browser is resized, like the image. I’ve tried the following but it changes all of my styles for the extra menu. Also, how to keep the line from breaking on the 2nd item?

    @media only screen and (min-width: 768px) and (max-width:790px) {.menu-extra .wvrx-menu > li > a { font-size: 80%  !important;  }

    http://sheerala.com/?page_id=1643

     

    Thank you!

    #53357

    Weaver
    Keymaster
    #53361

    Curtis
    Participant
    Thank you. How to adjust to maximum? The article explains how to scale up from a smaller screen but  I need to control the desktop version starting with a 30pt font.
    #53365

    Weaver
    Keymaster

    @scrambler wrote that article, and he would be more likely to have a quick answer.

    #53366

    scrambler
    Moderator

    Not sure why you are saying that.
    The article gives you a rule that will scale the text up or down with the browser.

    For example, the rule below using what the article explains will create that behavior for your menu items

    .menu-extra .wvrx-menu {font-size:calc(5px + 2vw);}

    If you do not want the font to scale up on desktop, you can add a specialized rule to override it on desktop

    .menu-extra .wvrx-menu {font-size:calc(5px + 2vw);}
    .is-desktop .menu-extra .wvrx-menu {font-size:30px;}

    #53370

    Curtis
    Participant

    Thank you for clarifying. Works perfectly.

    #53371

    Curtis
    Participant

    Is there a way to prevent the menu item lines from breaking? I’d prefer a scrollbar over the line break.

    I’ve tried white-space:nowrap;

     

    #53379

    scrambler
    Moderator

    A scroll bar will be ugly 🙂

    test the rule below to see what I mean

    .menu-extra .wvrx-menu-container li a {heigh:50px;overflow:auto;}

    #53384

    Curtis
    Participant

    Yes, I see. I’ll just work with @media to try to keep each on their own line.

    Thank you.

    #53388

    scrambler
    Moderator

    Know that the theme has device classes that may be easier to use than @media for single rules

    .is-desktop
    .is-mobile
    .is-phone
    .is-smalltablet

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.