I'm creating a responsive site. I have a media query set up so that when the screen width drops below 768 px a class (lets call it "hiddenClass") is hidden. Then I implement Javascript to toggle this class into view on a button click. The problem I'm running into is that javascript seems to override the media query. So if I shrink the screen below 768px the "hiddenClass" disappears....then I click the button which displays the "hiddenClass".....then click the button once more to hide it on the smaller device again.....now I expand the window and the "hiddenClass" stays hidden even after it gets to the 768px. If I take out the javascript and shrink the window the "hiddenClass" performs like it should...which tells me javascript is overriding it.

Is there a CSS fix to this? I know I could always check for a window resize event in javascript to display the hiddenClass after it reaches 768px. Was just wondering if this can be handled with CSS....or if javascript is the way to fix it.

Update JSfiddle with JS mented out so you can see how it should work...then add in the JS to see the issue described above. The button is the 'menu' navigation element when you shrink the screen down and "hiddenClass" would be the "menu" class in the li's:

/

HTML:

<ul>
        <li class="menuButton">- Menu -</li>
        <a href="index.html">
            <li class="menu" >
                Home
            </li>
        </a>
        <a href="instagram.html">
            <li class="menu" >
                Instagram
            </li>
        </a>    
        <li class="menu">Clients</li>
        <li class="menu">Nutrition</li>
        <li class="menu">About Me</li>
        <li class="menu">Contact</li>
    </ul>

css:

li {
display:inline;
color:$font-color--nav;
cursor:pointer;
font-size:1.5em;
padding: .7em .7em .7em .7em;
//for space between margins
margin-right:-4px;
border-radius:.5em;
}

ul {
    text-align:center;
}

.menuButton {
    display:none;
}


@media (max-width:768px) {
    ul {
        padding:0px;
    }

    li {
        display:list-item;
        border:1px solid white;
        padding:.2em .2em .2em .2em;
        border-radius:0px;
    }

    .menu {
        display:none;
    }

     .menuButton {
        display:list-item;
     }
}

javascript:

/****
$('ul').on('click', '.menuButton', function() {
    $('.menu').slideToggle();
});
****/

I'm creating a responsive site. I have a media query set up so that when the screen width drops below 768 px a class (lets call it "hiddenClass") is hidden. Then I implement Javascript to toggle this class into view on a button click. The problem I'm running into is that javascript seems to override the media query. So if I shrink the screen below 768px the "hiddenClass" disappears....then I click the button which displays the "hiddenClass".....then click the button once more to hide it on the smaller device again.....now I expand the window and the "hiddenClass" stays hidden even after it gets to the 768px. If I take out the javascript and shrink the window the "hiddenClass" performs like it should...which tells me javascript is overriding it.

Is there a CSS fix to this? I know I could always check for a window resize event in javascript to display the hiddenClass after it reaches 768px. Was just wondering if this can be handled with CSS....or if javascript is the way to fix it.

Update JSfiddle with JS mented out so you can see how it should work...then add in the JS to see the issue described above. The button is the 'menu' navigation element when you shrink the screen down and "hiddenClass" would be the "menu" class in the li's:

http://jsfiddle/or5vy17L/1/

HTML:

<ul>
        <li class="menuButton">- Menu -</li>
        <a href="index.html">
            <li class="menu" >
                Home
            </li>
        </a>
        <a href="instagram.html">
            <li class="menu" >
                Instagram
            </li>
        </a>    
        <li class="menu">Clients</li>
        <li class="menu">Nutrition</li>
        <li class="menu">About Me</li>
        <li class="menu">Contact</li>
    </ul>

css:

li {
display:inline;
color:$font-color--nav;
cursor:pointer;
font-size:1.5em;
padding: .7em .7em .7em .7em;
//for space between margins
margin-right:-4px;
border-radius:.5em;
}

ul {
    text-align:center;
}

.menuButton {
    display:none;
}


@media (max-width:768px) {
    ul {
        padding:0px;
    }

    li {
        display:list-item;
        border:1px solid white;
        padding:.2em .2em .2em .2em;
        border-radius:0px;
    }

    .menu {
        display:none;
    }

     .menuButton {
        display:list-item;
     }
}

javascript:

/****
$('ul').on('click', '.menuButton', function() {
    $('.menu').slideToggle();
});
****/

• javascript
• css
• overriding
• media

• Post your relevant coding, a demo is always nice – Jacob G Commented Jan 20, 2015 at 0:39
• 1 can you post your code? It's doubtful that well be able to help you much without it. put it in a jsfiddle if you want to be super awesome. – Todd Commented Jan 20, 2015 at 0:40
• People can only make guesses without seeing your actual code. Your description simply isn't enough detail to know what you're doing. Your code (JS, CSS, HTML) would allow people to give you a precise answer without guessing. – jfriend00 Commented Jan 20, 2015 at 1:00
• Sorry guys...code is posted above and here is the fiddle link. jsfiddle/or5vy17L/1 – John23 Commented Jan 20, 2015 at 1:35

2 Answers 2

The .hiddenclass is staying hidden because it is a inline style, and inline styles override nearly all other styles. You have two options, one is to override the inline style with a CSS, as described in this CSS Tricks post:

<div style="background: red;">
    The inline styles for this div should make it red.
</div>
div[style] {
   background: yellow !important;
}

^{JSFiddle Demo}
According to this article, this CSS solution works in:

• Internet Explorer 8.0
• Mozilla Firefox 2 and 3
• Opera 9
• Apple Safari, and
• Google Chrome

Or, use JS or JQuery to remove the inline style when the screen is resized:

$(window).resize(function(){
if($(this).width() >= 768){
$('.hiddenclass').show();
}
else{
$('.hiddenclass').hide();
}
});

^{JSFiddle Demo}

I seem to have e across this issue myself and following the advice here, I've e up with this solution:

window.onresize = function() {
    var menu = document.getElementById('nav').getElementsByTagName('ul')[0];

    if(window.innerWidth >= 1024) menu.style.display = '';
};

function toggleMenu() {
    var menu = document.getElementById('nav').getElementsByTagName('ul')[0];
    var link = document.getElementById('nav').getElementsByTagName('a')[0];

    if(menu.style.display == 'block') {
           menu.style.display = 'none';
           link.innerHTML = '▼';
        }else{
            menu.style.display = 'block';
            link.innerHTML = '▲';
    }
}

Explanation: The toggleMenu() function controls the display/hiding of the menu, and the issue presented itself after resizing the window from < 1024px (drop-down style menu) to > 1024px, my normal "desktop" menu disappeared pletely. Given that JavaScript inserts styles inline (i.e. as a element attribute, ) then on a resize of 1024 or higher, this inline style should be gone.

Problem fixed.