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

<?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' );
view raw slicknav.php hosted with ❤ by GitHub
/*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;
}
}
view raw slicknavstyle.css hosted with ❤ by GitHub

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

45 Comments

  1. Carlo S on September 18, 2016 at 8:13 pm

    Great plugin and works like a charm with Genesis. I had two questions:

    1) I would like to put some text (eg: Call 888-555-1212) on the left side of the Responsive Menu row. How would I be able to do this? I realize I can check off “Hide Main Header”, but I would rather keep this intact and be able to just add additional text on the Responsive Menu row.

    2) It would be great to add icons to the main categories in the responsive menu. Any advice on how to accomplish this with your existing code?

    Thanks again in advance, and keep up the great tutorials and updates on the plugin!

    Cheers
    Carlo

    • Neil Gowran on September 18, 2016 at 10:59 pm

      There is an option in the latest version of the plugin to add text that appears opposite the Menu icon, as to icons for menu items – that will need to be done via CSS.

      • Carlo on September 27, 2016 at 6:40 pm

        Hi Neil,

        Appreciate the reply, and what you said worked like a charm! Thanks!

        One other possible bug I came across is when I use the search in your SlickNav, and results come back on the following page, the SlickNav gets replicated. In other words, I have two menus after the search page has come back. Do I have something wrong setup, or is this a possible bug?

        Thanks again for all your help!

        Cheers
        Carlo

        • Neil Gowran on September 28, 2016 at 8:28 pm

          That shouldn’t happen, check this websites mobile menu to see default behaviour, perhaps you have some left over code from the manual slicknav tutorial?

  2. Okechukwu Solomon on May 14, 2016 at 3:55 am

    Please help me on how to add brand logo to it and remove the “MENU” before the 3 line button. Looking forward to see your reply. Thanks

  3. Christine on March 23, 2016 at 7:16 pm

    Thank you a million times over! I’ve been trying to implement a mobile menu on a from scratch Drupal 8 theme (modules that are ported are few and far between). This is the only solution that has worked for me. Thank you for the clear instructions!

    • Neil Gowran on March 23, 2016 at 8:17 pm

      Cool, haven’t tried Drupal 8 yet, great that it works there too.

  4. Danielle Frappier on March 23, 2016 at 4:02 pm

    These tutorials are great! Thank you for sharing them.

    I have a question about modifying what you did here slightly. Is there a way to have the secondary nav roll up into the menu too? I tried the code below, however that made two menu rather than rolling both menus into one hamburger menu.

    // Add Responsive SlickNav to a designated menu
    function eh_responsive_menujs() {
    echo ”
    jQuery(function($) {
    $(‘#menu-main-menu, #menu-top-menu’).slicknav();
    });
    “;
    }
    add_action (‘genesis_after’,’eh_responsive_menujs’);

  5. Terrie on March 21, 2016 at 8:50 pm

    Hi there,
    I’ve used this plugin on several sites…love it! But now, I have a new challenge. I’m working on a one-page site and have a menu with anchor links. I would LOVE for the menu to collapse on item click since the page is scrolling to an anchor and I don’t want the menu to continue to display. Is this possible?

    I’m using Genesis/Dynamik and even tried to use the built-in responsive menu with some custom js I found, but can’t get it to work. Would much rather use SlickNav.

    Thanks!

    • Neil Gowran on March 21, 2016 at 9:47 pm

      You can do this, if you open slick-init.js in the js folder of the plugin and add on line 35:
      closeOnClick: true,
      I will add this as an option in the next update.
      Add Close On Click

  6. Jessie on January 27, 2016 at 8:31 pm

    How can I turn off the expanding mechanics? So for desktop view we want the expanding menus, showing subpages. But for mobile we only want to show the main nav items. I’ve hidden them with CSS/media queries, but that doesn’t change that once touched, the menu item doesn’t take the user to that page, rather it’s still trying to expand the menu.

  7. Peninah on November 8, 2015 at 9:28 am

    Thank you! This was so clear and simple to use. Much appreciated!

  8. Cao on September 21, 2015 at 3:07 pm

    Hi
    Tried installing to have the Primary menu to be responsive.

    I tried changing the menu-main as required to: #menu-primary-nav, nav-primary, etc, and a few other combinations.

    Can you tell me what this: should be changed to for the primary menu?
    /* #menu-main-menu is the original menu */
    #menu-main-menu {

    It just doesn’t work as is.
    Thanks!

    • Neil Gee on September 26, 2015 at 12:33 am

      Would have to see the code to say – do you have a link?

  9. Marvin Forte on August 31, 2015 at 1:36 am

    Spoke too soon. I figured it out:
    allowParentLinks:true
    in the .js file.

  10. Marvin Forte on August 31, 2015 at 1:30 am

    Thanks for the great information and content. The menu is working great for me with one exception. If there’s a page with no sub-pages, then clicking on the menu takes me to that page. But, if there’s a page with sub-pages, I can’t click on the parent page itself (only the sub-pages). How can I fix this?

  11. Monique on August 20, 2015 at 12:21 am

    When activating this plug-in (version 1.6.0) I am getting ‘Parse error: syntax error, unexpected T_STRING in /x/x/x/x/x/x/slicknav-mobile-menu/slicknav-mobile-menu.php on line 1’ … suggestions?
    Thanks!

    • Neil Gee on August 20, 2015 at 1:15 am

      Hi Monique, for the latest version I am using some modern PHP standards that require a minimum version of PHP 5.3.0, if you are using PHP 5.2.X the plugin will fail – but the older versions will be ok.

      WordPress now recommends running PHP 5.4.X, any webhost should really be running something higher, you may even have the option your self in the control panel to select a higher version.

  12. Terrie on August 5, 2015 at 10:14 pm

    Hi Neil,
    Plugin is working beautifully. Now, I need to add an additional menu that will replace the default menu on a specific template page (replaces primary with secondary). I have successfully replaced the full size menus on the template, but not having luck firing a second slicknav. I know this is pretty advanced so any help/links you can provide would be appreciated. I’ve researched but can’t find anything similar to what I want to do!
    Example of primary menu: http://www.cogneurosociety.org/wordpress2015
    Example of secondary menu: http://www.cogneurosociety.org/wordpress2015/annual-meeting

    Thanks!!

  13. Rich on August 3, 2015 at 1:16 pm

    Love the plugin however I’ve been trying to get it to sit level with the logo on this website.

    I’ve tried various options in the “Menu Position” box but it either ends up above or below. Ideally I want it to end up on the right (in the middle) with the logo on the same line on the left.

    Any suggestions?

    Thanks

  14. Amit Ramani on August 2, 2015 at 4:53 am

    I have been using your Genesis Child Theme from github. When I try using this plugin, I do not see any Mobile optimized menus on my cellphone (Android Samsung Galaxy S4). I have tried both ID and Class CSS Selectors for the “Slicknav Mobile Menu Name” field.

    What am I doing wrong?
    The site is http://www.tacknrider.com

    • Neil Gee on August 2, 2015 at 5:57 am

      Hi – you may have to use latest version of the theme where all SLickNav functions are removed from theme (as now I recommend using plugin instead) – you can try and just replace the functions.php file with the latest version from GitHub – if you send me your functions.php file – I can remove what is not required and resend it to you.

      • Aaron on September 29, 2015 at 10:55 pm

        I’m in the same boat. I am running your child theme, not the latest version, but one with slick-nav as a grayed out recommendation, and the plugin but it doesn’t load the plugin at any width.

        any ideas?

        • Neil Gee on September 30, 2015 at 1:46 am

          Would need to see the code to have an idea – do you have a link – also check there are no js errors in the console.

          • aaron on October 7, 2015 at 9:21 pm

            Sure. I put a demo of the site up at http://www.fertilitysnapshot.com. I checked the console and the only issue I see is with the google analytics js file.

            I would have responded sooner, but I never got a notification that you responded. I’ll just check back periodically for your response.

            Thanks!



          • Neil Gee on October 7, 2015 at 11:08 pm

            You are using the wrong CSS ID – it should be #menu-standard-menu you currently have #slicknav



          • aaron on October 9, 2015 at 4:12 pm

            Hmm I posted my response to this several days ago, but I guess something went wrong.

            Anyways, I have a demo set up at fertilitysnapshot.com. I couldn’t find any console errors, save for the analytics tracking code, which was expected.

            Any help would be appreciated. Thanks!



          • aaron on October 9, 2015 at 4:25 pm

            Thanks! That cleared it right up. The wording made me think it was asking for the id of the mobile menu, not of my current menu. Sorry for the duplicate comment. I seem to be having issues. I am really enjoying your genesis theme btw.



  15. Terrie Addobati on July 17, 2015 at 9:35 pm

    I love this and it’s working great!! One question: I’m working on a site and trying to position the slick menu under the header (where the primary menu is), instead of at the top. Using Genesis/Dynamik and the Slick plugin, and tried to add this to custom functions but it didn’t work:
    add_action ( ‘genesis_after_header’,’themeprefix_responsive_menujs’ );
    Here’s the URL:
    http://www.cogneurosociety.org/wordpress2015/

    Thanks!

    • Neil Gee on July 18, 2015 at 5:40 am

      You can try the plugin I created – it has a Menu Position option that may work for you – https://wordpress.org/plugins/slicknav-mobile-menu

      • Terrie on July 21, 2015 at 12:55 am

        Thanks Neil!
        I’m actually using the plugin but completely missed this option in settings.

        Although I have to admit I’m still a little confused how I can change the position via a css class. Seems like I would need to hook it after the header. Can you clarify?

        Much appreciated!

        • Neil Gee on July 21, 2015 at 1:11 am

          Hi Terrie – the position can be changed by using a CSS class/ID of an element which is preferably full width – in this example http://coolestguidesontheplanet.com/ narrow the viewport below 600px and you will see the Menu appear lower down – if you look at the source code it is appearing in a full width div with a class of .nav-primary .wrap . The value of .nav-primary .wrap is put into the settings of the plugin.- Hope that makes sense

          • Terrie on July 21, 2015 at 6:47 am

            Perfect! That did it. Thanks so much!



  16. Jessie on June 4, 2015 at 7:13 pm

    This is just what I was looking for, and had it running in 5 min. Thank you!

  17. Rehman on April 26, 2015 at 4:01 pm

    Great work , i just need m menu will open from left to right how it will be?? in current time it top to bottom.

    • Neil Gee on April 26, 2015 at 11:09 pm

      Better off using Sidr for off canvas stuff like that.

  18. Jane on April 1, 2015 at 11:21 pm

    Do you know how the code is adjusted for underscores?

    • Neil Gee on April 1, 2015 at 11:24 pm

      Hi Jane – the only thing you should need to change is the genesis_after hook for wp_head then it will work on any theme

  19. John on March 1, 2015 at 12:35 am

    Yeah, this is awesome… much better, not to mention easier and faster, than the alternatives. Nice!

  20. Beau on November 23, 2014 at 3:39 pm

    Great instructions and works fast and looks great. Thanks!!

Leave a Comment





%d bloggers like this: