Updated on November 22, 2016
In this article I share how Slidebars jQuery plugin can be implemented in Genesis for sliding a sidebar from the right edge of screen when a link is clicked.
We are going to display widgets placed in Primary Sidebar widget area in the sliding sidebar (i.e., Slidebar). The Slidebar will smoothly go back into the right edge of screen when the custom toggle link (a hamburger icon via Font Awesome) is clicked again or when clicking anywhere on the canvas i.e., the main part of the webpage or clicking the close icon in the open sidebar.
Note that there are a lot of ways in which Slidebars can be used and am covering a particular case where a right Slidebar is toggled by clicking on a mobile menu icon that is floated to the right of a fixed top bar. Also, the full width layout (with no sidebars) has been set as the default in Genesis theme settings.
Screenshot:
Screencast:
Note: There's a plugin for implementing Slidebars in WordPress called Off-Canvas Sidebars. I have not personally tried this plugin. Just mentioning here as an alternative option.
While the tutorial has been written for Genesis Sample child theme, it should work with minor adjustments in any Genesis child theme.
