Last active
August 16, 2022 00:12
-
-
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
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 | |
//* 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' ); | |
} |
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 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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Doesn't work even made the js folder and added the js file with the jQuery.