Corporate Pro Genesis Superfish Menu Breakpoint Fix

corporate-pro-genesis-superfish-menu-breakpoint-fix.css

/* ========================
  Hamburger Breakpoint Fix
========================== */

/* First we move the styles from the mobile only
main style.css file to extend up to our new custom
breakpoint in this media query (default breakpoint
of theme was 896) */

@media (min-width: 896px) and (max-width: 1244px) {
	.menu-item {
		display: block;
		position: relative;
		width: 100%;
		padding: 10px 0;
		padding: 1rem 0;
		height: inherit;
		-ms-flex-order: -1;
		order: -1;
	}
	.nav-primary,
	.nav-secondary {
		overflow: auto;
		position: absolute;
		top: 0;
		right: -500px;
		right: -50rem;
		bottom: 0;
		width: 93vw;
		max-width: 400px;
		max-width: 40rem;
		height: 100vh;
		margin: 0;
		padding: 0 40px;
		padding: 0 4rem;
		transition: all 0.3s ease;
	}
	.nav-primary.activated,
	.nav-secondary.activated {
		right: -6vw;
		box-shadow: 0 0 4rem rgba(42, 49, 57, 0.2);
		border-top: 1px solid #ffe130;
	}
	.nav-primary .menu,
	.nav-secondary .menu {
		position: relative;
		padding: 5em 0 7.5em;
	}
	.menu-toggle {
		display: block;
		position: relative;
		z-index: 1;
		height: auto;
		margin-right: -0.5em;
		padding: 1em 0.5em;
		color: #2a3139;
		background: transparent;
		box-shadow: none;
		cursor: pointer;
	}
}

/* Then we move the styles from the default
896px+ media query to our new custom break 
point of 1245px+ */

@media (min-width: 1245px) {
	.before-header .wrap {
		max-width: 100%;
	}
	.menu-item {
		display: -ms-flexbox;
		display: flex;
		width: auto;
		height: 10rem;
		padding: 0 0.618em;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-order: initial;
		order: initial;
	}
	.nav-primary,
	.nav-secondary {
		display: block;
		overflow: visible;
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: auto;
		max-width: none;
		height: auto;
		margin: 0;
		padding: 0;
		border: none;
		background-color: transparent;
		box-shadow: none;
	}
	.nav-primary.activated,
	.nav-secondary.activated {
		right: auto;
		box-shadow: none;
	}
	.nav-primary .menu,
	.nav-secondary .menu {
		padding: 0;
	}
	.menu-toggle {
		display: none;
	}
	.sub-menu-toggle {
		display: none;
	}
}

corporate-pro-genesis-superfish-menu-breakpoint-fix.js

/*
* Move before header into nav on mobile.
*/
$(window).on("resize", function () {
  // Adjust the number in the if statement to match
  // your custom breakpoint
  if ($(window).width() < 1244) {
    $('.before-header').appendTo('.nav-primary .menu');
  } else {
    $('.before-header').prependTo('.site-header');
    $('.nav-primary .menu .before-header').remove();
  }
}).resize();