CSS特殊性与！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.

Answer 2

Your problem at heart is that you're mixing CSS and in-line styles. As a general rule, avoid placing specific CSS properties directly on elements, whether in HTML, by using element.style.<property> = , or via jQuery's .css() feature. Instead, you should define the properties you want as CSS rules, using classes:

#collapsible-menu                       { height: auto;  }
#content                                { padding-top: 290px; }
#someelt.menu-visible #collapsible-menu { height: 0; }
#someelt.menu-visible #content          { padding-top: 80px; }

where someelt is some higher-level ancestor element. Then, your JS becomes simply

function toggleMenu() {
    document.getElementById('someelt').classList.toggle('menu-visible');
}

If you are targeting browsers which do not support classList (see CanIUse ), jQuery provides its own version of class toggling.

CSS is not an imperative language, but if you want, you can think of the #someelt.menu-visible part of the last two rules above as a kind of if statement: " If menus are visible, then shrink collapsible-menu to zero height", etc. In this metaphor of CSS as a kind of programming language (which it is), the presence of the menu-visible class of #someelt could be thought of as a kind of boolean "variable", I suppose. Most likely, you will no longer need a corresponding variable in your JS.

Anyway, the advantage of this is that people looking at your code can see all your CSS-related logic just by looking at the CSS file, instead of having to look at both CSS and JS, and you can change CSS-related things in just one place.