Convert responsive menu to navicon when viewport is smaller than 768px

I'm updating our site to be responsive. Right now, when the viewport measures less than 768px the left nav column stacks (see at [login to view URL] ). This works, but I would prefer that the nav menu be replaced by a navicon that when clicked opens the navigation menu below it. I have attached two files. The first one "File1" shows how it looks, now. "File2" shows how I want it to look. In file two, you will see that there is a "navicon" button. When that is clicked by the user, I want the menu bar to slide down and be visible. When it is clicked, again, it slides back up.