Updated on June 12, 2018
In one of my earlier tutorials, I wrote about Slideout in Genesis where the off-canvas side menu was set to show the widgets placed in a custom widget area.
In this article, we shall move the mobile responsive menu which appears after clicking/tapping the hamburger menu icon (from 959px and below in Genesis Sample) from below the hamburger menu icon to slide out from left (or right) of the screen using Slideout.js.
While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme.
Step 1
Install and activate Genesis JS / No JS plugin.
We shall use this to prevent the side menu flash on larger widths as the pages load/reload.
Step 2
Add div.side-menu having
1) a header with a title and close icon
2) an empty div (.nav-menu) where the nav menu (.nav-primary) shall be moved inside using jQuery from 959px and below
3) and a search box
above .site-container.
Add the following in child theme's functions.php:
add_action( 'genesis_before', 'custom_side_menu' );
/**
* Adds `.side-menu` above `.site-container`.
*/
function custom_side_menu() { ?>
<div class="side-menu">
<div class="wrap">
<!-- Side Menu Header -->
<div class="side-menu-header">
<h4 class="menu">Menu</h4>
<span class="close-icon dashicons dashicons-no-alt"></span>
</div>
<!-- Nav menu -->
<section>
<div class="nav-menu"></div>
</section>
<!-- Search -->
<section>
<?php get_search_form(); ?>
</section>
</div>
</div>
<?php
}
Step 3
Upload slideout.min.js to child theme's js directory
Create a file named say, slideout-init.js in the same location having the following:
