Genesis Tutorials

Toggle Side Widget Overlay For Slide In & Out Menu

This code adds a custom widget area named Side Menu which can be toggled open/close by clicking the animated menu icon.

Here’s the demo video showing you exactly what the code does tested using the Genesis Sample child theme by StudioPress.

Demo Video

The demo shows a new widget area added named Side Menu which is populated with a custom menu widget and a custom HTML widget containing address HTML.

The code positions animated menu bars in the header which opens and closes the widget area. The widget displays over the content of the page unlike this solution which pushes the content ( off canvas ) to the side.

Easy To Work With Code

This tutorial contains a hand coded solution which beginners may find much easier to work with & understand compared to some jQuery plugins which contain a large amount of JS.

  • Only a few lines of jQuery ( easy to extend/modify )
  • Easy to reposition the animated hamburger menu icon using CSS
  • Easy to modify the sidebar widget area CSS.

Code Installation

Once you have the downloaded the members only files, there’s 4 simple steps.

Step 1 : From the download folder, upload the toggle.js file to your child themes root directory.

Step 2 : From the download folder, copy & paste the PHP code from the functions.php to the end of your child themes functions file.

Step 3 : From the download folder, copy & paste the CSS from the style.css file to the end of your child themes style.css file and clear caching.

Step 4 : Add any widget(s) to the Side Menu widget area.

Register or login to access the download folder :

Related Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *