navigation menu-toggle

I want the home page of my site that I designed differently than the rest of my site to have a different navigation style as well. Problem is, if I change the ID or CLASS of the navigation code:

<nav id="site-navigation" class="main-navigation" role="navigation">

It breaks the menu-toggle feature of the navigation.

Clearly either the ID or the CLASS is connected to the success of the menu-toggle feature but I have been unable to figure out where. I think somewhere I saw a connection to navigation.js which is probably where it all happens. Change the ID/CLASS, break the JavaScript; makes sense.

Does anyone know of a way that I can safely make another style for my navigation to use on a different page without breaking the menu-toggle feature? (I don’t see a way to edit the JavaScript code even)