CSS specificity beat inline with !important

Question

Here is my site: http://stage.samkeddy.com/

It's responsive using a couple media queries and a mobile menu button powered by javascript.

Here is the javascript for the menu button:

function toggleMenu () {
    if (menuIsVisible == false) {
        collapsibleMenu.style.height = 'auto';
        content.style.paddingTop = '290px';
        menuIsVisible = true;
    }
    else {
        collapsibleMenu.style.height = '0';
        content.style.paddingTop = '80px';
        menuIsVisible = false;
    }
}

so you can see that I need to adjust the padding at the top of the content div, in order to offset the menu

But if resize to the mobile size, open the menu, and then resize back to the desktop size, the padding isn't fixed by the media query, because there's still an inline style from the javascript. I tried making the padding on the desktop version !important, but it the padding still doesn't change when resized, even though according to this !important beats inline.

You can test for yourself by opening the size (how it should look), resizing to a mobile width(the nav will disappear, and you will see the menu button), clicking the menu button (leave the menu open), then resize the site back to a desktop width. You will see the padding is still there. If you inspect it, you can see the original padding is crossed out in favor of the inline style.

I know this would be possible by monitoring the width with javascript and setting the padding then, but I really don't want to do that, and don't think I should have to.

EDIT: solved

First, I should have been adding classes, rather than adding CSS with my javascript.

Then I assumed that putting !important outside of a media query would make it only show up on desktop, but it took over all media queries. So placing just this in a query made it work. Note that if I was using 2 separate menus (mobile/desktop), I wouldn't need this, but since it was fixed and the #content needed padding, it had to be done. But using this technique you can also use only a single menu, but doing the height for the menu this way. I've demonstrated the technique in a codepen: http://codepen.io/anon/pen/JFvay

Answer 1

Adding this code to your stylesheet should solve the problem, I just tried this on your website using the Developer Tools and it's working:

@media only screen and (min-width: 643.2px) {
    #content {
        padding-top: 80px !important;
    }
}

Although I'd strongly recommend you to create a separate navigation menu for mobile devices and resort to using @media-queries to display it.