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…
jQuery
/wp-content/themes/YOURTHEME/js/
folder and name it jquery.slicknav.min.js
CSS
/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 nav triggered at 600px
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 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
Full Gist
I have created a SlickNav Menu plugin that has options that you can change from within the WP Admin Dashboard.
