CODEWITHSUNDEEP
javascript
JeanReno
JeanReno

Reputation: 55

Javascript display block display none

I know there are a lot of post like that but I didn't understand why my function doesn't work. I'm learning then I hope you will be gentle^^

Here is my HTML 

<div id="BurgerMenu">
            <button onclick="menuBurger()">
                &#9776;
            </button>
        </div>

        <nav id="SecondNav">
            <ul>
                <li><a href="#itineraires">Itinéraires</a></li>
                <li><a href="#trafic">Infos trafic</a></li>
                <li><a href="#actualite">Actualité</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>

Here is my CSS 

@media screen and (max-width: 812px) { 
#FirstNav{
    display:none !important;
}

#sectionLogo{
    margin: 25px;
}

#secondHeader{
    display :flex;
    flex-flow: row-reverse nowrap !important;
    justify-content: space-between;
    align-items: baseline !important;
    padding-left: 40px;
    padding-right: 40px;
}

#BurgerMenu{
    display: block !important;
}

#SecondNav{
    display: none !important;
}

}

and here is my JS function

function menuBurger(){
var x = document.getElementById("SecondNav");
if (x.style.display === "none"){
    x.style.display = "block";
}else{
    x.style.display = "none";
}

}

I can't change the !important in CSS because that doesn't work without. Thx to explain.

Upvotes: 0

Views: 33

Answers (1)

brk
brk

Reputation: 50291

There is no need of !important. It is creating the problem along with id specifier. Use toggle to add or remove class as required

function menuBurger() {
  document.getElementById("SecondNav").classList.toggle('toggleDisplay')
}
@media screen and (max-width: 812px) {
  #FirstNav {
    display: none !important;
  }
  #sectionLogo {
    margin: 25px;
  }
  #secondHeader {
    display: flex;
    flex-flow: row-reverse nowrap !important;
    justify-content: space-between;
    align-items: baseline !important;
    padding-left: 40px;
    padding-right: 40px;
  }
  #BurgerMenu {
    display: block;
  }
  .toggleDisplay {
    display: none;
  }
}
<div id="BurgerMenu">
  <button onclick="menuBurger()">
                &#9776;
            </button>
</div>

<nav id="SecondNav">
  <ul>
    <li><a href="#itineraires">Itinéraires</a></li>
    <li><a href="#trafic">Infos trafic</a></li>
    <li><a href="#actualite">Actualité</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Upvotes: 1

Related Questions