Trigger Mobile Menu

Sometimes you may want to trigger the mobile menu sooner than the default screen size.

** Before you customize, please back up your files so you can roll your changes back if you need to.**

First thing is to add this custom css under theme options / general / custom css

/* Mobile Menu */


@media screen and (max-width:991px) {


    .navbar-header {float:none}


    .navbar-toggle {display:block}


    .navbar-collapse {
        border-top:1px solid transparent;
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);        
    }
    .navbar-collapse.collapse {display:none!important}


    .navbar-nav {
        float:none !important;
        margin:7.5px -15px;
    }


    .navbar-nav > li {float:none}
    .navbar-nav > li > a {
        padding-top:10px;
        padding-bottom:10px;
    }
    .navbar-text {        
        float:none;
        margin:15px 0;
    }


    .navbar-collapse.collapse.in {display:block !important}


    .collapsing {overflow:hidden !important}


    .navbar-nav .open .dropdown-menu {
        position:static;
        float:none;
        width:auto;
        margin-top:0;
        background-color:transparent;
        border:0;
        box-shadow:none;
    }


    .navbar-default .navbar-collapse {border:0}


    .navbar .navbar-nav {
        float:none;
        text-align:left;
        margin:0 0 10px;
        padding-top:15px;
        border-top:1px solid #e7e7e7 !important
    }
    .navbar .navbar-nav > li > a {
        padding:10px 15px;
        margin-left:0;
        margin-right:0;
    }


    .navbar .navbar-nav > li > a:after,
    .navbar .navbar-nav > li > a:hover:after {height:0 !important}


    .navbar .navbar-nav .open .dropdown-toggle {background-color:#eee !important}


    .navbar .navbar-nav .dropdown-menu {background-color:#f4f4f4}


    .navbar .navbar-nav .dropdown-menu li a {line-height:200%}


    .navbar .navbar-nav .dropdown-menu li.active a {background-color:transparent !important}


    .navbar .navbar-nav .dropdown-menu {
        left:auto;
        padding:5px 0;
        border:0;
        box-shadow:0 0 0 0;
    }
    .navbar .navbar-nav .dropdown-menu li a {
        font-size:14px;
        text-align:left;
        padding:5px 15px 5px 25px;
        color:#777;
    }
    .navbar .navbar-nav .dropdown-menu li a:hover,
    .navbar .navbar-nav .dropdown-menu li.active a {color:#333 !important}


    .navbar .navbar-nav .dropdown:hover .dropdown-menu {display:none}
    .navbar .navbar-nav .dropdown.open:hover > .dropdown-menu {display:block}


    .navbar .navbar-nav li:last-child .dropdown-menu {
        right:auto;
        left:auto;
    }
    .navbar .caret {display:inline-block}
}


@media screen and (min-width:768px) and (max-width:991px) {
    .navbar-toggle {margin-right:0}
}

Second step edit assets/js/main.js

line 60 max-width:767px -> 991px


line 67 min-width:768px -> 992px


line 301 max-width:767px -> 991px

That's it. Make sure to clear your cache and fresh.

Tested on our local dev :)