Mobile Menu on 1024px - by slidebird - on WordPress WooCommerce support

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

  • Avatar: slidebird
    slidebird
    Participant
    February 4, 2018 at 15:46

    Hi

    On the Tablet landscape mode (eg 1024x 768) the Menu breaks so it moves to the second line which does not look goog (screenshot http://prntscr.com/i9yt67) … is there a way to show the mobile menu early? I would like to show the Desktop Version only after 1280px… there is a menu option in 8themes which is called “resppnsive” and the default is 1200px for “large resulution from”… first i thought thats what i need but i dont think this option has any impact when the mobile menu appears and when the desktop version

    thanks for help

    10 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 5, 2018 at 10:34

    Hello,

    Mobile menu starts from 992px. If you want to change this breakpoint it requires a lot of additional style customization. But you may add this code in custom css:

    @media (min-width: 992px) and (max-width: 1200px){ 
        .main-nav .menu > li > a, .fixed-header .menu > li > a {
            font-size: 16px;
        }
        .fixed-header-area .fixed-header .logo-with-menu + div + div{
            margin-left: 0;
        }
    }

    Regards

    Avatar: slidebird
    slidebird
    Participant
    February 6, 2018 at 10:17

    This just changes the font size?! And even with this small font it still breaks with only 5 Menu Elements… this cant be the solution… most sites have more then 5 Menuitems… most modern themes are working with a mobile menu below 1024 px… so please help me with this…

    thanks

    Avatar: slidebird
    slidebird
    Participant
    February 6, 2018 at 10:21

    and also why does your theme use 2 colums on talbet portrait resolution? see here http://prntscr.com/iasgpd

    i thought you use twitter bootstrap? shouldnt it be a one column layout on 768 by default?

    thanks

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 6, 2018 at 10:22

    Hello,

    With the code, this will look – http://prntscr.com/iashim with 6 menu items in 1 row with logo.

    Go to edit your content and simply change width as you want in column settings http://prntscr.com/iasj7e

    Regards

    Avatar: slidebird
    slidebird
    Participant
    February 6, 2018 at 10:26

    not on most modern templates with high resolution… just see here ipad pro for example

    http://prntscr.com/iasjja

    Avatar: slidebird
    slidebird
    Participant
    February 6, 2018 at 10:27

    or here on a regular landscape mode http://prntscr.com/iaskee

    Avatar: slidebird
    slidebird
    Participant
    February 6, 2018 at 10:30

    ah okey thanks for the tip but im not rally familiar with VC… what do i have to chosse to use 2 colums on dekstop and 1 on portrait 768?

    thanks for help

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 6, 2018 at 10:35

    Make sure that you added the code in custom.css of patent theme or in style.css file of child theme – https://prnt.sc/iaslou

    Please see screenshot http://prntscr.com/iasnzr find more information here https://wpbakery.com/video-academy/responsive-column-control-width-offset-param-usage-explained/

    Regards

    Avatar: slidebird
    slidebird
    Participant
    February 6, 2018 at 10:48

    yeah i didnt implement the css till now because i think 16px is to small but ok i changed the width of the logo to 70 % so i have a litte more space…

    i dont think it makes sense to use 6 colums -1/2 on default… is there a way to change the default? i dont want to change every row all the time…

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 6, 2018 at 14:38

    Unfortunately, this is not possible.

    Regards

  • Viewing 11 results - 1 through 11 (of 11 total)

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

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