neilgee
4/21/2014 - 10:42 PM

Using SlickNav on WordPress and Genesis Mobile Menus

Using SlickNav on WordPress and Genesis Mobile Menus

/*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;
	 }
}
<?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' );