templates/zebra/src/js/app.core.js
function breakNavbarMenu() {
        // we set a reference to the actual width on first call.
        if (!navbarMenuActuallWidth) {
            navbarMenuActuallWidth = $navbarMenu.width() || 500;
        }

        // if we have a sidebar (API route), we'll check the difference with the
        // sidebar width, otherwise we'll check with the navbar brand with.
        var diff = $sidebarWrapper && $sidebarWrapper.length ? app.SIDEBAR_WIDTH : $navbarBrand.width();
        var breakMenu = ($navbarInner.width() || 0) - diff <= navbarMenuActuallWidth + 50;
        // console.log($navbarInner.width(), '-', $navbarBrand.width(), '<=', navbarMenuActuallWidth + 50, '»', breakMenu);
        if (breakMenu) {
            if ($nbmBtn.hasClass('break')) return;
            $nbmBtn.addClass('break');
            $navbarMenu.addClass('break');
            $navbarList.addClass('break');
        } else {
            toggleHamMenu(false);
            if (!$nbmBtn.hasClass('break')) return;
            $nbmBtn.removeClass('break');
            $navbarMenu.removeClass('break');
            $navbarList.removeClass('break');
        }
    }
function breakNavbarMenu() {
        // we set a reference to the actual width on first call.
        if (!navbarMenuActuallWidth) {
            navbarMenuActuallWidth = $navbarMenu.width() || 500;
        }

        // if we have a sidebar (API route), we'll check the difference with the
        // sidebar width, otherwise we'll check with the navbar brand with.
        var diff = $sidebarWrapper && $sidebarWrapper.length ? app.SIDEBAR_WIDTH : $navbarBrand.width();
        var breakMenu = ($navbarInner.width() || 0) - diff <= navbarMenuActuallWidth + 50;
        // console.log($navbarInner.width(), '-', $navbarBrand.width(), '<=', navbarMenuActuallWidth + 50, '»', breakMenu);
        if (breakMenu) {
            if ($nbmBtn.hasClass('break')) return;
            $nbmBtn.addClass('break');
            $navbarMenu.addClass('break');
            $navbarList.addClass('break');
        } else {
            toggleHamMenu(false);
            if (!$nbmBtn.hasClass('break')) return;
            $nbmBtn.removeClass('break');
            $navbarMenu.removeClass('break');
            $navbarList.removeClass('break');
        }
    }
We'll determine the breakpoint by the navbar menu width. this menu can
have any width since the end-user can add nav-items freely when he/she
builds the documentation. So instead of media queries in CSS (which only
watch for screen widths, not elements), we set the breakpoint here via
JS.
@private