Note: The code snippets listed below are not needed anymore since the latest version of the Genesis Sample child theme now includes responsive navigation menus.
Below is the PHP code to make Genesis Sample child theme menus responsive.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
//* Enqueue scripts and styles | |
add_action('wp_enqueue_scripts', 'beautiful_enqueue_scripts_styles'); | |
function beautiful_enqueue_scripts_styles() { | |
wp_enqueue_script('beautiful-responsive-menu', get_bloginfo('stylesheet_directory') . '/js/responsive-menu.js', array('jquery'), '1.0.0'); | |
wp_enqueue_style('dashicons'); | |
} |
Below is the JS code to make Genesis Sample child theme menus responsive.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(function($) { | |
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>'); | |
$(".responsive-menu-icon").click(function() { | |
$(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle(); | |
}); | |
$(window).resize(function() { | |
if (window.innerWidth > 768) { | |
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style"); | |
$(".responsive-menu > .menu-item").removeClass("menu-open"); | |
} | |
}); | |
$(".responsive-menu > .menu-item").click(function(event) { | |
if (event.target !== this) return; | |
$(this).find(".sub-menu:first").slideToggle(function() { | |
$(this).parent().toggleClass("menu-open"); | |
}); | |
}); | |
}); |
Below is the CSS code to make Genesis Sample child theme menus responsive.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Responsive Menus */ | |
.responsive-menu-icon { | |
cursor: pointer; | |
display: none; | |
margin-bottom: -1px; | |
text-align: center; | |
} | |
.responsive-menu-icon::before { | |
content: "\f333"; | |
display: inline-block; | |
font: normal 20px/1 'dashicons'; | |
margin: 0 auto; | |
padding: 10px; | |
} | |
@media only screen and (max-width: 768px) { | |
.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu, .genesis-nav-menu.responsive-menu { | |
display: none; | |
} | |
.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon { | |
display: block; | |
} | |
.genesis-nav-menu.responsive-menu .menu-item { | |
margin: 0; | |
} | |
.genesis-nav-menu.responsive-menu .menu-item:hover { | |
position: static; | |
} | |
.genesis-nav-menu.responsive-menu .current-menu-item > a, .genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover, .genesis-nav-menu.responsive-menu a, .genesis-nav-menu.responsive-menu a:hover { | |
background: none; | |
line-height: 1; | |
padding: 16px 20px; | |
} | |
.genesis-nav-menu.responsive-menu .menu-item-has-children { | |
cursor: pointer; | |
} | |
.genesis-nav-menu.responsive-menu .menu-item-has-children > a { | |
margin-right: 60px; | |
} | |
.genesis-nav-menu.responsive-menu > .menu-item-has-children:before { | |
content: "\f347"; | |
float: right; | |
font: normal 16px/1 'dashicons'; | |
height: 16px; | |
padding: 16px 20px; | |
right: 0; | |
text-align: right; | |
z-index: 9999; | |
} | |
.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before { | |
content: "\f343"; | |
} | |
.genesis-nav-menu.responsive-menu .sub-menu { | |
border: none; | |
left: auto; | |
opacity: 1; | |
padding-left: 25px; | |
position: relative; | |
-moz-transition: opacity .4s ease-in-out; | |
-ms-transition: opacity .4s ease-in-out; | |
-o-transition: opacity .4s ease-in-out; | |
-webkit-transition: opacity .4s ease-in-out; | |
transition: opacity .4s ease-in-out; | |
width: 100%; | |
z-index: 99; | |
} | |
.genesis-nav-menu.responsive-menu .sub-menu .sub-menu { | |
margin: 0; | |
} | |
.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover, .genesis-nav-menu.responsive-menu .sub-menu li a, .genesis-nav-menu.responsive-menu .sub-menu li a:hover { | |
background: none; | |
border: none; | |
padding: 12px 20px; | |
position: relative; | |
width: 100%; | |
} | |
.nav-primary .genesis-nav-menu.responsive-menu { | |
padding-bottom: 16px; | |
} | |
} |