The code in this tutorial pushes the site container to the right when the side widget is toggled open.
The solution includes a 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.
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.
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 :