Initiate the mobile header at your desired width. Change 768px to whatever you like.

gistfile1.txt

@media( max-width: 768px ) {
	#site-navigation,
	#sticky-navigation {
		display: none !important;
		opacity: 0;
	}
	#mobile-header {
		display: block !important;
		opacity: 1;
		width: 100% !important;
	}
	.mobile-header-navigation.is_stuck {
		box-shadow:0 2px 2px -2px rgba(0, 0, 0, .2);
	}
	.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
		display: inline-block;
		float: right;
		clear: none;
		width:auto;
	}
	#mobile-header:not(.toggled) .menu {
		display: none;
	}
	#mobile-header .menu li {
		float: none;
		clear: both;
	}
	#mobile-header .menu .search-item,
	#mobile-header .menu .wc-menu-item {
	    display: none !important;
	}
	#mobile-header .sub-menu {
		position: relative;
		width: 100%;
	}
	.site-header {
		display: none;
	}
	.mobile-header-navigation .mobile-header-logo {
		float: left;
		display: block;
	}
	.mobile-header-navigation .mobile-header-logo img {
		position: relative;
		vertical-align:middle;
		padding: 10px;
		display: block;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.nav-float-left .mobile-header-navigation .mobile-header-logo,
	.rtl .mobile-header-navigation .mobile-header-logo {
		float: right;
	}
	.nav-float-left.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle,
	.rtl.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
		float: left;
	}
	.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
		display: block;
		position: relative;
		float: right;
	}
	.rtl.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
		float: left;
	}
	body:not(.mobile-header-logo) .mobile-header-navigation .mobile-bar-items {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
	}
	body:not(.mobile-header-logo).rtl .mobile-header-navigation .mobile-bar-items {
		left: 0;
		right: auto;
	}
}