Skip to content

Instantly share code, notes, and snippets.

@hendratok

hendratok/slicknav.php

Forked from neilgee/slicknav.php
Created December 6, 2016 15:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hendratok/f0e64c1155f6dfe312fe29849ffb61df to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hendratok/f0e64c1155f6dfe312fe29849ffb61df to your computer and use it in GitHub Desktop.
Download ZIP
Using SlickNav on WordPress and Genesis Mobile Menus
Raw
slicknav.php
<?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' );
Raw
slicknavstyle.css
/*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