How to enable responsive toggle menu for tablets

[valerie]

Hello,

I noticed the responsive toggle menu gets enabled from mobile view but not in a tablet view.
How can I change this so that the toggle menu gets enabled for the tablets as well?

I have dropdown menu and it is hard to select when using tablets.

[Veena]

Pls share a link to your site, we will provide you the required custom CSS .

[hartsook]

I need this also. I want mobile menus to display instead of regular menus when using a tablet say below 770px wide.

How can I change the breakpoint for mobile menu display in the Invent theme?

[Veena]

Hi hartsook,

Pls use the below custom CSS in themeoptions –

@media only screen and (max-width: 770px){
    #primary-menu {
        display: none !important;
    }
    #header.sticky #primary-menu{
        display: none !important;
    }
    #mobile-menu, #mobile-menu-toggle {
        display: block;
    } 
   #mobile-menu, body {
        -webkit-transition: left 0.4s ease-in-out 0s;
        -moz-transition: left 0.4s ease-in-out 0s;
        transition: left 0.4s ease-in-out 0s;
    }
    body {
        overflow-x: hidden;
        position: relative;
        left: 0;
    }
    body.push-right {
      left: 240px;
    }
}

If you have any further queries pls open a new topic .

Thanks.

[hartsook]

Thanks, that works except for one thing.

The site-logo stays on the left until the browser is about 750px then it moves to the center.

So on an iPad where you can’t change the screen dimensions, with the breakpoint and code you gave me, in landscape it’s a normal menu, in portrait orientation the normal menu goes away and you see the mobile menu on the left, but the logo still stays on the left so it’s hard to see the mobile menu “hamburger”.

There must be a bit more code that makes the logo shift to the center at the same width the menu changes from normal to mobile.

[attachment file=”Teachers Ross Valley Charter.jpeg”]

[Veena]

Pls use this updated custom CSS –

@media only screen and (max-width: 1024px){
    #primary-menu {
        display: none !important;
    }
    #header.sticky #primary-menu{
        display: none !important;
    }
    #mobile-menu, #mobile-menu-toggle {
        display: block;
    } 

    #mobile-menu, body {
        -webkit-transition: left 0.4s ease-in-out 0s;
        -moz-transition: left 0.4s ease-in-out 0s;
        transition: left 0.4s ease-in-out 0s;
    }
    body {
        overflow-x: hidden;
        position: relative;
        left: 0;
    }

    body.push-right {
      left: 240px;
    }
#site-logo a img {
    margin: 0 auto;
}
#site-logo {
    display: block;
    float: none;
    position: relative;
    margin: 0 auto;
    top: 0;
    padding: 10px 0;
}
#top-header-area ul.contact-info li {
    width: 100%;
    text-align: center;
}
}

[Author]

Posts