[Resolved] Tablet Menu

It is designed that way as some sites have a lot more than four menu items and we have to strike a balance at what screen width to display the mobile menu.

You can change the width at which the mobile menu is triggered with some custom CSS. Add this in Customize > Appearance > Additional CSS and let us know if this works better for your site.

@media screen and (max-width: 1024px){
    .toggle-nav{
        display: none;
    }
    #primary-menu {
        text-align: left;
        height: auto;
        position: relative;
        right: auto;
        padding-top: 0;
        width: 80%;
    }
    #primary-menu li{
        width: auto;
        float: right;
    }
}

@media screen and (max-width: 768px){
    .toggle-nav{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1000;
        width: 47px;
        height: 47px;
    }
    #primary-menu{
        background: #fff;
        text-align: left;
        height: 100vh;
        overflow: auto;
        position: fixed;
        right: -250px;
        padding-top: 50px;
        width: 250px;
        z-index: 100;
    }
    #primary-menu li{
        width: 100%;
    }
}

Tested the code on our demo and it worked. Can you let me know the URL of your site please and I’ll take a look and see why it doesn’t work on your site.

Thanks. I’ve looked at your site and the code is working correctly.

The mobile menu is now triggered at 768px width instead of the default 1024px.

768px is a good width to distinguish between mobile and tablet but, if you need the standard menu to stay on screen at less width, you can change the 768px value on this line:
@media screen and (max-width: 768px){