Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Corporate Pro Genesis Superfish Menu Breakpoint Fix
/* ========================
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;
}
}
/*
* 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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.