Skip to content

Instantly share code, notes, and snippets.

@geeac
Last active March 10, 2017 16:03
Show Gist options
  • Save geeac/5f9097cb9ebaa9eda1b49ce654b230a2 to your computer and use it in GitHub Desktop.
Save geeac/5f9097cb9ebaa9eda1b49ce654b230a2 to your computer and use it in GitHub Desktop.
Add an extra hamburger menu in Genesis
//* Add hamburger button to primary nav for responsive menu
add_filter( 'wp_nav_menu', 'gc_responsive_nav', 10, 2 );
function gc_responsive_nav($menu, $args){
$args = (array)$args;
if ( 'primary' !== $args['theme_location'] )
return $menu;
ob_start();
$hamburger = '<div id="mobile-button" class="mobile-button toggle-menu menu-right"><span></span><span></span><span></span></div>';
return $menu . $hamburger;
}
<script>
jQuery(function( $ ){
/* NEW HAMBURGER MENU */
$('.mobile-button').click(function(){
$(this).toggleClass('open');
$( '.nav-secondary .genesis-nav-menu' ).slideToggle();
});
});
</script>
<style>
.mobile-button {
width: 40px;
height: 45px;
position: absolute;
top: 10px;
right: 10px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
z-index: 9999;
}
.mobile-button span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.mobile-button span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.mobile-button span:nth-child(2) {
top: 12px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.mobile-button span:nth-child(3) {
top: 24px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.mobile-button.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -3px;
left: 8px;
}
.mobile-button.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
.mobile-button.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 26px;
left: 8px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment