Using Slick Responsive Navigation Mobile Menus on Genesis Child Theme

This guide uses a jQuery mobile responsive menu from Josh Cope and shows how you can use it for a mobile menu in a Genesis Child theme in WordPress.

There is also a guide for regular WordPress themes here.

Also I have made a plugin which will work  on Genesis and regular WordPress themes.

SlickNav mobile menu is supports all modern browsers and IE7+, works on iOS Safari and Android and can handle multi-level sub-menus. You can also add it to multiple menus and position these to various HTML elements on the page by altering some options in the jQuery variables.

Add in the Core jQuery and CSS

You can download and install the JS and CSS files or use them via jsdelivr

Download the latest release from Github, then expand the archive and get jquery.slicknav.min.js and slicknav.css – move these files into place in your theme…

/wp-content/themes/YOURTHEME/js/
folder and name it jquery.slicknav.min.js

/wp-content/themes/YOURTHEME/css/
folder and name it slicknav.css

 

Register the jQuery and CSS Files Locally in Genesis

Enqueue the Javascript and CSS in your functions.php file:

function themeprefix_scripts_styles() { 
 wp_enqueue_script('slicknav', get_stylesheet_directory_uri() . '/js/jquery.slicknav.min.js', array( 'jquery' ),'1.0.5',false );
 wp_enqueue_style('slicknavcss', get_stylesheet_directory_uri() . '/css/slicknav.css','', '1.0.5', 'all' ); 
}
add_action( 'wp_enqueue_scripts', 'themeprefix_scripts_styles' );

 

…Or Register the jQuery  and CSS in Genesis via a CDN

Enqueue the Javascript and CSS in your functions.php file:

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 the jQuery to fire

In functions.php also add in some jQuery triggers to fire on the main menu:

// Add Responsive SlickNav to a designated menu
function themeprefix_responsive_menujs() {
	echo 	"<script>
			jQuery(function($) {
			$('#menu-main-menu').slicknav();
			});
			</script>";
}
add_action ('genesis_after','themeprefix_responsive_menujs');

The jQuery selector above is using the ID of the <ul> as highlighted, change that to the Menu ID that you wish to target or Class.

Show/Hide the Menus in CSS

Here is the CSS to add in your regular CSS file. It sets the menus to hide/display depending on the viewport breakpoint – adjust your px in your style.css

/*CSS 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;
	}
}

Set the pixel width when you want the mobile menu to fire, the above example is set to 600px and is set inside a media query. The selector before the media query hides the slick nav menu at larger viewport size and displays the regular navigation. The CSS selector inside the media query is the ID of the menu <ul>, change that to the Menu ID that you wish to target.

 

Viewing on Mobile

Slick navigation on Genesis Theme WordPress

Slick nav triggered at 600px

 

Slicknav with Sub Menus on genesis

Slick nav showing sub-menu items

jQuery Options

There are a few options you can add into javascript to change a few things, here are a couple:

label:'Footer Menu',
duration: 400,
prependTo:'.site-footer',

So in the above the the label will set the name of the Menu, default is ‘MENU‘, the duration is the speed of the dropdown, default is 200, higher numbers make it slower.

The prependTo allows you to position the menu to a different part of the page similar to hooks in Genesis, the default HTML element is <body> which will sit at the top of the page, to change this you just pass in a HTMl element that is present on the page.

Firing Multiple Menus

In the example below, 2 menus are targetted for the Slick Navigation responsive menus, one in the header and one in the footer

//Responsive Nav
function themeprefix_responsive_menujs() {
	echo 	"<script>
			jQuery(function($) {
			$('#menu-main-menu').slicknav();
			$('#menu-footer-menu').slicknav({
					label:'Footer Menu',
					duration: 400,
					prependTo:'.site-footer',
				});
			});
			</script>";
}
add_action ('genesis_after','themeprefix_responsive_menujs');

So in this example the header menu #menu-main-menu is using the slicknav defaults but the #menu-footer-menu has a different label, opening/closing speed and is located in the .site-footer.

header-footer-slick-navs

Header-Footer Slick Navs Menus

Remember to add the additional menu IDs to the CSS to show/hide the menus

Further CSS Styling

To further style the navigation just edit the slicknav.css

Demo

Full Gist

I have created a SlickNav Menu plugin that has options that you can change from within the WP Admin Dashboard.