Skip to content

Instantly share code, notes, and snippets.

@neilgee
Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save neilgee/9044054 to your computer and use it in GitHub Desktop.
Save neilgee/9044054 to your computer and use it in GitHub Desktop.
/* Responsive Navigation
---------------------------------------------------------------------------------------------------- */
/* Standard Navigation
--------------------------------------------- */
nav {
clear: both;
}
/* Navigation toggles
--------------------------------------------- */
.sub-menu-toggle,
.menu-toggle {
display: none;
visibility: hidden;
}
/* Navigation toggles - Ensure Menu Displays when Scaled Up
--------------------------------------------- */
@media only screen and (min-width: 600px) {
nav {
display: block !important;
}
}
/* Navigation toggles - Mobile (Change max width as you see fit)
--------------------------------------------- */
@media only screen and (max-width: 767px) {
.menu-toggle,
.sub-menu-toggle {
display: block;
font-size: 20px;
font-size: 2rem;
font-weight: 700;
margin: 0 auto;
overflow: hidden;
padding: 20px;
padding: 2rem;
text-align: center;
visibility: visible;
}
button.menu-toggle,
button.sub-menu-toggle {
background-color: transparent;
color: #999;
}
.sub-menu-toggle {
padding: 18px;
padding: 1.8rem;
position: absolute;
right: 0;
top: 0;
}
.menu-toggle:before {
content: "\2261";
}
.menu-toggle.activated:before {
content: "\2191";
}
.sub-menu-toggle:before {
content: "+";
}
.sub-menu-toggle.activated:before {
content: "-";
}
nav {
display: none;
position: relative;
}
.genesis-nav-menu .menu-item {
background-color: #f5f5f5;
display: block;
position: relative;
text-align: left;
}
.genesis-nav-menu .menu-item:hover {
position: relative;
}
.genesis-nav-menu .sub-menu {
clear: both;
display: none;
opacity: 1;
position: static;
width: 100%;
}
.genesis-nav-menu .sub-menu a {
border-left: 0;
position: relative;
width: auto;
}
.genesis-nav-menu .sub-menu .sub-menu {
margin: 0;
}
.genesis-nav-menu .sub-menu .sub-menu a {
background-color: #f5f5f5;
padding-left: 30px;
}
.genesis-nav-menu .sub-menu .sub-menu .sub-menu a {
background-color: #fff;
padding-left: 40px;
}
.nav-primary a:hover,
.nav-primary .current-menu-item > a {
color: #333;
}
}
wp_register_script ('responsive', get_stylesheet_directory_uri() . '/js/responsive-menu.js', array( 'jquery' ),'1',true);
wp_enqueue_script('responsive');
( function( window, $, undefined ) {
'use strict';
$( 'nav' ).before( '<button class="menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to menus
$( 'nav .sub-menu' ).before( '<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to sub menus
// Show/hide the navigation
$( '.menu-toggle, .sub-menu-toggle' ).on( 'click', function() {
var $this = $( this );
$this.attr( 'aria-pressed', function( index, value ) {
return 'false' === value ? 'true' : 'false';
});
$this.toggleClass( 'activated' );
$this.next( 'nav, .sub-menu' ).slideToggle( 'fast' );
});
})( this, jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment