• 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

Off Canvas Push Widget For Side Menu

The code in this tutorial pushes the site container to the right when the side widget is toggled open.

The solution includes an animated hamburger menu icon enabling you to open and close the side widget area which in this example, is populated with the custom menu widget and some address HTML.

Update – See this version for use with themes that use a fixed site header.

Here’s the demo video showing how it works :

Demo Video 1#

This method uses the .toggleClass method.

Demo Video 2

This method uses the .animate method.

Code Installation

There’s 3 steps :

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

Step 2 – From the download folder, copy & paste the PHP code from the functions.php file 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.

You can then add widgets to the Side Menu widget area.

Register or login to access the download folder for members :

Register for full access

Related Tutorials

  • Slide In Vertical Nav Menu Widget For Genesis Themes With Fixed Header
  • Add Slide In Widget To Infinity Pro Theme
  • Toggle Side Widget Overlay For Slide In & Out Menu

Accordion & Toggle

Reader Interactions

Comments

  1. Jennifer Andrew says

    February 1, 2019 at 1:50 pm

    Thank you for the tutorial! Is there any way to get the menu to slide out from the right side of the screen?

    Log in to Reply
    • Brad Dalton says

      February 1, 2019 at 8:19 pm

      Yes however you would need to modify the code to do that. Which theme are you using?

      Log in to Reply
      • Jennifer Andrew says

        February 13, 2019 at 2:31 pm

        Thanks for the reply and alternate method! I will check it out. For this tutorial, I’m using the Genesis Sample theme.

        Log in to Reply
    • Brad Dalton says

      February 12, 2019 at 6:05 pm

      Another option is to use this solution https://wpsites.net/web-design/infinity-pro-change-offscreen-content-to-vertical-menu/

      Log in to Reply

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