Initiate mobile menu at a smaller width than 768px. Replace the 600px with whatever you like.

gistfile1.txt

@media (max-width: 769px) {
	.menu-toggle,
	.main-navigation.toggled .main-nav > ul {
		display: none;
	}
	
	.main-navigation ul li.sfHover > ul {
		display: block;
	}
	
	.sub-menu.toggled-on,
	.children.toggled-on {
		display: none !important;
		opacity: 0 !important;
	}
	
	.dropdown-menu-toggle:before {
		content: "\f107" !important;
	}
	
	.sfHover > a .dropdown-menu-toggle:before {
		content: "\f105" !important;
	}

	.main-navigation ul {
		display: block;
	}
	
	.nav-float-right .main-navigation {
		float: right;
		margin: 0;
	}
	
	.nav-float-left .main-navigation {
		float: left;
		margin-bottom:0px;
	}
	
	.nav-float-left .site-branding {
		float: right;
	}
	.nav-float-left .site-logo {
		float: left;
	}
	
	.navigation-search {
		bottom: auto;
		top: 0;
	}
	
	.mobile-bar-items {
		display: none;
	}
	
	.main-navigation .menu li.search-item {
		display: block !important;
	}
	
	.main-nav .sf-menu > li {
		float: left;
		clear: none;
	}
	
	.nav-aligned-right.nav-below-header .main-navigation .sf-menu > li, 
	.nav-aligned-right.nav-above-header .main-navigation .sf-menu > li, 
	.nav-aligned-center.nav-below-header .main-navigation .sf-menu > li, 
	.nav-aligned-center.nav-above-header .main-navigation .sf-menu > li {
		float: none;
		display: inline-block;
		*display: inline;
		*zoom:1;
	}
	
	.main-navigation .main-nav ul ul {
		position: absolute;
		top: 0;
		left: 100%;
		width: auto;
	}
	
	.menu-item-has-children .dropdown-menu-toggle {
		float: none;
	}
	
	.navigation-search,
	.navigation-search input {
		width: 100%;
		max-width: 100%;
	}
	
	.sf-menu > li.menu-item-float-right {
		float: right !important;
		display: block;
	}
}
@media (max-width: 600px) {
	.menu-toggle,
	.main-navigation.toggled .main-nav > ul {
		display: block;
	}
	
	.main-navigation ul li.sfHover > ul {
		display: none;
	}
	
	button.menu-toggle {
		background-color: transparent;
		width: 100%;
		border: 0;
	}
	
	button.menu-toggle:hover,
	button.menu-toggle:active,
	button.menu-toggle:focus {
		background-color: transparent;
		border: 0;
		outline: 0;
	}
	
	.sub-menu.toggled-on,
	.children.toggled-on {
		display: block !important;
		opacity: 1 !important;
	}
	
	.dropdown-menu-toggle:before {
		content: "\f107" !important;
	}
	
	.sfHover > a .dropdown-menu-toggle:before {
		content: "\f106" !important;
	}

	.main-navigation ul {
		display: none;
	}
	
	.nav-float-right .main-navigation,
	.nav-float-left .main-navigation {
		float: none;
		margin-bottom:20px;
	}
	
	.nav-float-left .site-branding,
	.nav-float-left .site-logo {
		float: none;
	}
	
	.navigation-search {
		bottom: auto;
		top: 0;
	}
	
	.mobile-bar-items {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 21;
		list-style-type: none;
	}
	
	.mobile-bar-items a {
		display: inline-block;
	}
	
	.main-navigation .menu li.search-item {
		display: none !important;
	}
	
	li.search-item a {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.menu-toggle {
		text-align: center;
	}
	
	.nav-search-enabled .main-navigation .menu-toggle {
		text-align: left;
	}
	
	.main-nav .sf-menu > li {
		float: none;
		clear: both;
	}
	
	.nav-aligned-right.nav-below-header .main-navigation .sf-menu > li, 
	.nav-aligned-right.nav-above-header .main-navigation .sf-menu > li, 
	.nav-aligned-center.nav-below-header .main-navigation .sf-menu > li, 
	.nav-aligned-center.nav-above-header .main-navigation .sf-menu > li {
		display: block;
		margin: 0;
		text-align: left;
	}
	
	.main-navigation .main-nav ul ul {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
	}
	
	.menu-item-has-children .dropdown-menu-toggle {
		float: right;
	}
	
	.main-navigation {
		text-align:left;
	}
	
	.navigation-search,
	.navigation-search input {
		width: 100%;
		max-width: 100%;
	}
	
	.sf-menu > li.menu-item-float-right {
		float: none !important;
		display: inline-block;
	}
}