CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Xander
Xander

Reputation: 1011

Class toggle working but rules not taking effect?

I have a navigation div with a height of 0px, when I click a hamburger icon I want a class with 250px height to be added. I'm using an event listener to detect the click which is tested with an alert and working. ToggleClass() is then being used to add the class.

In the developer console I can see the class ebing added however the height of the div isn't changing and you can also see that the height rule isn't being detected/displayed in the console, even with a strikethrough.

Here is an image of the relevent info from dev console: https://gyazo.com/900f858cbfc41e9e8bfe00eb9fd8f1cb

styles.css:

#responsiveNav {
    position: absolute;
    right: 0;
    width: 200px;
    height: 0px;
    text-align: center;
    background-color: rgba(28, 28, 27, 0.8);
    color: #009641;
    margin-top: 100px;
    overflow: hidden;
    z-index: 1500;
    transition: all 0.8s ease;
}

.mobNavHeight {
    height: 250px;
}

JS:

$(document).ready(function () {
    var hamburgerBtn = document.getElementById("hamburgerBtn");

//DISPLAY MOBILE NAVIGATION ON HAMBURGER CLICK
    function displayMobNav() {
        alert("working");
        $('#responsiveNav').toggleClass("mobNavHeight");
    }

//EVENT LISTENERS
    hamburgerBtn.addEventListener("click", displayMobNav);


}); //Doc Ready

Upvotes: 0

Views: 42

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

It's a CSS specificity issue. An id has a higher specificity than a class. Use this in your CSS instead.

#responsiveNav.mobNavHeight {
    height: 250px;
}

But if I were you, I wouldn't use an id to target an element via CSS in the first place. Only use the id to target in javascript, but in CSS just use a class like .responsiveNav, move all of the #responsiveNav styles to that, then use .mobNavHeight to overwrite it. Like this.

<nav id="responsiveNav" class="responsiveNav">nav</nav>

.responsiveNav {
    position: absolute;
    right: 0;
    width: 200px;
    height: 0px;
    text-align: center;
    background-color: rgba(28, 28, 27, 0.8);
    color: #009641;
    margin-top: 100px;
    overflow: hidden;
    z-index: 1500;
    transition: all 0.8s ease;
}

.mobNavHeight {
    height: 250px;
}

Upvotes: 2

Related Questions