Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 8, 2014 at 7:10 pm #261947
    TheMediaman

    Enfold 2.7.1
    WP 3.9

    How can I set the main menu and main menu sublevel links font size between specific browser pixel widths only?

    The client wants the main menu and sublevel link font larger for the desktop but that causes problems on a tablet in portrait mode. The menu wraps to a second line. So I would like to set a custom font size above smartphone yet below desktop resolutions. In my case between 769 and 1140 pixel width.

    – a custom main menu and main menu sublevel links font size is set in theme options.
    – the header mobile menu activation set for below 768 and that works just fine for smartphones.
    – I tried unsuccessfully tried working with the info and code in this thread (last entry) https://kriesi.at/support/topic/menu-problem-on-ipad/
    – I tried directly editing the code in layout.css

    I tried adapting the following code (I have no experience so it was a guess and tried to make something work but I failed)

    p {
    @include responsive-font-size (
        $min-font-size: 1.8em,
        $max-font-size: 3.7em,
        $min-screen-width: 640px,
        $max-screen-width: 1200px,
        $font-size-step: 0.3em /* optional, default: 0.1em */
    );
}

    But that just overrode the main site font and left the menu font unaffected. Definitely the wrong way

    May 9, 2014 at 12:44 am #262062
    TheMediaman

    I must have tried adding this to Quick CSS 20 times and now it works for some reason. I must have been typing incorrectly.

    @media only screen and (max-width: 1140px) and (min-width: 768px) {
#top .main_menu ul:first-child > li > a { font-size: 12px; }
}

    For anyone else that reads this remember to set the Header Mobile Menu Activation to only for smartphone in ENFOLD>HEADER LAYOUT>MOBILE MENU tab. If you set it to smartphone and tablet the changes will only affect the tablet in landscape mode (greater than 990px)

    This topic can be closed. (Admins…you can delete if you wish.)

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘How to set a main menu and sublevel font size between specific pixel widths?’ is closed to new replies.