• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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 :

Register for full access

Related Tutorials

  • Full Height Vertical Side Push Menu Widget For Left or Right
  • Slide In Vertical Nav Menu Widget For Genesis Themes With Fixed Header
  • Infinity Pro Slide In Widget
  • Off Canvas Push Widget For Side Menu

Accordion & Toggle

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags