Change the Mobile Menu Break Point

Sometimes you may want to trigger the mobile menu sooner than the default screen size. Below are the steps to change it.

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

The first thing is to copy/paste this code into the area under Appearance > Customize > Additional 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}

    header.dark-header .navbar-nav .open .dropdown-toggle {background-color: #1c2022 !important;}
    header.dark-header .navbar-nav .dropdown-menu {background-color: #1f2426 !important;}
    header.dark-header .navbar-nav .open .dropdown-menu > li > a, header.dark-header .navbar-nav .open .dropdown-menu > .active > a, header.dark-header .navbar-nav .open .dropdown-menu > .active > a:focus {color:#a2a7a9;}


    header.dark-header .navbar-nav .open .dropdown-menu > li > a:hover, header.dark-header .navbar-nav .open .dropdown-menu > .active > a:hover {color:#fff !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}
}

The second step is to edit assets/js/main.js and change the values as shown:

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

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

line 64: max-width:767px -> 991px That's it. 

Make sure to clear your cache and refresh.

For the Bellevue theme: