Full Height Vertical Side Push Widget For Left or Right

The code in this download does a number of things :

• Adds a custom widget area named Side Menu which you can populate with the Nav Menu widget.
• Adds a setting named Side Menu to the default Menus setting in the Customizer you can use to show the side menu on the left or right of your site.
• Adds an animated hamburger/cross icon to the left or right side of your site header based on the selection you make in customize > menus > side menu > left or right.
• Pushes the site container to the left or right when the hamburger ( open ) icon is clicked and closes when the cross is clicked.

The following 2 column gallery shows you how it works :

Watch the following video to learn more about how the code in this tutorial works.

Demo Video #

Shows the contents of the Side Menu widget area displaying in a full height section you can toggle open and close using the icon on the site header. Works on both the left or right side of your site container simply by selecting the radio buttons on the customizer.

Tested and coded for the Genesis Sample child theme by StudioPress which uses a fixed header. Should work fine in any other Genesis child theme however the CSS would most likely need to be modified.

Code Installation #

There’s 4 steps :

Step 1 – Copy the PHP code from the functions.php file to the end of the Genesis Sample themes functions file.

Step 2 – Copy & paste the CSS to the end of the Genesis Sample themes style.css file and clear caching.