Skip to content

Instantly share code, notes, and snippets.

@designnify
Last active August 16, 2022 00:12
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save designnify/e42f9430163aa6da15a0 to your computer and use it in GitHub Desktop.
Save designnify/e42f9430163aa6da15a0 to your computer and use it in GitHub Desktop.
Genesis Responsive Menu Navigation - How to create a collapsible responsive menu for a genesis child theme
<?php
//* Do NOT include the opening php tag
//* Activate the use of Dashicons
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
//* Enqueue scripts for Responsive menu
add_action( 'wp_enqueue_scripts', 'enqueue_responsive_menu_script' );
function enqueue_responsive_menu_script() {
wp_enqueue_script( 'my-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
}
jQuery(function( $ ){
$("header .genesis-nav-menu, .nav-primary .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").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("header .genesis-nav-menu, .nav-primary .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");
});
});
});
/* ## Responsive Nav CSS
---------------------------------------------------------------------------------------------------- */
.responsive-menu-icon {
cursor: pointer;
display: none;
}
.responsive-menu-icon::before {
content: "\f333";
display: block;
font: normal 30px/1 'dashicons';
margin: 0 auto;
padding: 10px;
text-align: center;
color: #fff;
}
/* ## Media Queries
---------------------------------------------------------------------------------------------------- */
@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:hover {
position: static;
}
.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu.responsive-menu li a,
.genesis-nav-menu.responsive-menu li a:hover,
.genesis-nav-menu.responsive-menu li.current-menu-item > a {
background: none;
display: block;
line-height: 1;
padding: 12px 0;
}
.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: 11px 0;
right: 0;
text-align: right;
z-index: 9999;
color: #fff;
}
.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
content: "\f343";
color: pink;
}
.genesis-nav-menu.responsive-menu .sub-menu {
left: auto;
opacity: 1;
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 {
padding-left: 20px;
margin: 0;
}
.genesis-nav-menu.responsive-menu .sub-menu li a,
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
background: none;
border: none;
box-shadow: none;
padding: 12px 0;
position: relative;
width: 100%;
}
.genesis-nav-menu.responsive-menu {
padding-bottom: 16px;
}
.nav-primary .genesis-nav-menu.responsive-menu li a {
background: none;
color: #FFF;
}
.nav-primary .genesis-nav-menu.responsive-menu li a:hover {
background: none;
color: pink;
}
}
@MonteLogic
Copy link

Doesn't work even made the js folder and added the js file with the jQuery.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment