Return to previous page

Font size menu level 1 on different screen sizes

This topic has 4 replies, 2 voices, and was last updated 6 years, 10 months ago ago by Rose Tyler

  • Avatar: Divites
    Divites
    Participant
    February 8, 2018 at 09:24

    Hi,

    I was wondering if you could help me with some code to decrease the font size of the menu items on level 1 when visiting the site on devices with screensize max 1280×800. When the site is shown on a laptop the menu font size is too large which causes the menu items to be shown in 2 rows. I really would like to show the menu on 1 row on smaller devices as well.

    #184347 Copied
    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 8, 2018 at 11:21

    Hello,

    Please add this code in Theme Options > Styling > Custom css > Global Custom css:

    @media only screen and (max-width: 1400px) and (min-width: 992px){ 
    .header-xstore .navbar-header {
        width:  15% !important;
    }
    .menu-wrapper .menu > li > a {
        font-size: 18px;
        padding: 0.77em 0.5em;
    }
}
@media only screen and (max-width: 1200px) and (min-width: 992px){ 
    .menu-wrapper .menu > li > a {
        font-size: 14px;
    }
}

    Regards

    #184385 Copied
    Avatar: Divites
    Divites
    Participant
    February 8, 2018 at 16:22

    Hi,

    Thx for your great support!

    Regards,

    Johan

    #184479 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 8, 2018 at 16:27

    Hello,

    You’re welcome!

    Regards

    #184482 Copied
  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Games Dark – WordPress WooCommerce Theme
lazy-placeholder
Engineer Store – WordPress WooCommerce Theme
lazy-placeholder
Web Agency – WordPress WooCommerce Theme
lazy-placeholder
Flowers Store – WordPress WooCommerce Theme
lazy-placeholder
Minimal Fashion 02 Store – WordPress WooCommerce Theme
lazy-placeholder
HandMade Store – WooCommerce Theme
lazy-placeholder
Electron Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Travel – WooCommerce Theme
lazy-placeholder
Flowers Store – WooCommerce Theme
lazy-placeholder
Business – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.