Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using SlickNav on WordPress and Genesis Mobile Menus
<?php
//do not copy above opening php tag
/**
* Using SlickNav as Mobile Menus
*
* @package Slick Nav Mobile Menu
* @author Neil Gee
* @link https://wpbeaches.com/using-slick-responsive-menus-genesis-child-theme/
* @copyright (c) 2014, Neil Gee
*/
function themeprefix_scripts_styles(){
wp_enqueue_script( 'slicknav', '//cdn.jsdelivr.net/jquery.slicknav/1.0.5/jquery.slicknav.min.js', array( 'jquery' ),'1.0.5',false);
wp_enqueue_style( 'slicknavcss', '//cdn.jsdelivr.net/jquery.slicknav/1.0.5/slicknav.css','', '1.0.5', 'all' );
}
add_action( 'wp_enqueue_scripts', 'themeprefix_scripts_styles');
//Set Responsive Nav to fire - change CSS ID of menu to suit
function themeprefix_responsive_menujs() {
echo "<script>
jQuery(function($) {
$('#menu-main-menu').slicknav();
});
</script>";
}
add_action ( 'genesis_after','themeprefix_responsive_menujs' );
/*CSS Slick nav Menu Style*/
.slicknav_menu {
display:none;
}
@media screen and (max-width:600px) {
/* #menu-main-menu is the original menu */
#menu-main-menu {
display:none;
}
.slicknav_menu {
display:block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.