WooCommerce Storefront Theme Collapsable Mobile Nav

Demo

Very short story of how this code and repository came about:

I was working on a WooCommerce project where I used the Storefront theme. At some point I decided test the website on mobile and I was startled by how ugly the mobile navigation looked when you have multiple levels of submenus so I decided to fix this mess.

At first I thought that I could override Storefront's navigation functionality with PHP but pretty soon I realized that I don't really want to do that at all :D and I also realized that with some JavaScript, jQuery and CSS magic this all can be fixed really easily.

How to install

All of the files in this repository are meant to be installed as a child theme to storefront so here are the steps below:

1. Download the whole repository using this link or the green "Clone or download" button on the GitHub interface
2. In your WordPress installation in ./wp-content/themes create a new folder storefront-child and dump all the files that you downloaded there.
3. Go to the admin panel of your WordPress and navigate to Appearance -> Themes and activate the child theme.
4. Enjoy (If you give this repository a start that will also be appreciated) :D

TODO