Adjust jquery to correct responsive navigation panel

Question

I am creating my first responsive website and going through a little learning curve with the side panel navigation... I actually found a bit of code on stackoverflow to used instead of the bloated pluggins I found online.

This is the temp website. http://streamlinebuilderscorp.com.216-70-85-163.messtudios.com/

And the problem is when you resize the browser smaller the 690px the mobile navigation appears.. and everything seems to work fine on the iPhone but on the desktop if you leave the mobile side navigation open and then resize the browser more then 690 the css media query hides the panel and it doesn't reset the main navigation bar.

I appreciate the help in advanced.. Also I can make a jfiddle or something if requested.

• I assume the logic to fix this would be a jquery if resize greater then 690 execute the close click event but can't seem to get it to work.

Thanks, -Muhu

Answer 1

No need for JavaScript. Add an overriding style to the container:

@media (min-width: 690px) {
    #container {
        margin-left: 0 !important; /* overrides inline styles */
    }
}