Reply To: Tablet Menu

[Yazmin]

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%;
    }
}