0

I have a ul tag with an id of sideNav and I'm toggling a class on it with JavaScript.

For the id styles, I have a left attribute with the value of 0, while on the class I have the same attribute with a value of -100%.

I have tried a lot of things to discover what the problem is and I've come to the conclusion that I can't use the same property with a different value in this case.

Why? Do you know any alternatives? Am I missing something here?

This is my code:

var btn = document.getElementById("burgerWrapper");
var sideNav = document.getElementById("sideNav");

btn.addEventListener("click", () => {
  sideNav.classList.toggle("activeNav");
})
#sideNav {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: 1rem 0;
}

.activeNav {
  left: -100%;
}
<ul id="sideNav">
  <li><a href="#">Option1</a></li>
  <li><a href="#">Option2</a></li>
  <li><a href="#">Option3</a></li>
</ul>
Daniel_Knights
  • 7,940
  • 4
  • 21
  • 49
  • Just FYI, you can, in fact, use the same property within different classes or ids. You just need to override the previous value with `!important`. So in your case you would write your `.activeNav` class this way: `left: -100% !important;` – codemonkey Jan 24 '21 at 06:00

3 Answers3

2

Your issue is the CSS specificity, the id is more specific than a class therefore overriding the latter

You can see how CSS specificity works in an answer of mine here

const btn = document.getElementById("burgerWrapper"),
  sideNav = document.getElementById("sideNav")

btn.addEventListener("click", () => sideNav.classList.toggle("activeNav"))
#sideNav {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: 1rem 0;
}

#sideNav.activeNav {
  left: -100%;
}
<ul id="sideNav">
  <li><a href="#">Option1</a></li>
  <li><a href="#">Option2</a></li>
  <li><a href="#">Option3</a></li>
</ul>

<button id="burgerWrapper">click me</button>
dippas
  • 58,591
  • 15
  • 114
  • 126
2

The CSS Cascade is very important to learn, Your properties are being overwritten because of specificity.

Your #sideNav has a specificity score of 1.0.0, and the .activeNav has a specificity of 0.1.0, so the id wins. You need to be more specific, like here in example: #sideNav.activeNav, it has a score of 1.1.0, so it will override all the mentioned above and it should work, You can read here more about the CSS cascade and specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

var btn = document.getElementById("burgerWrapper");
var sideNav = document.getElementById("sideNav");

btn.addEventListener("click", () => {
    sideNav.classList.toggle("activeNav");
});
.body {
    position: relative;
}

#sideNav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 1rem 0;
}

#sideNav.activeNav {
    left: -100%;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body class="body">
        <ul id="sideNav">
            <li><a href="#">Option1</a></li>
            <li><a href="#">Option2</a></li>
            <li><a href="#">Option3</a></li>
        </ul>
        <button id="burgerWrapper">press</button>
        <script src="script.js"></script>
    </body>
</html>
dippas
  • 58,591
  • 15
  • 114
  • 126
Allen Al-Shamali
  • 101
  • 6
0

Try with this


#sideNav {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: 1rem 0;
}

#sideNav.activeNav {
  left: -100%;
}
Maaart
  • 55
  • 5