Javascript display block display none

Question

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.

That important is problem. Js display cannot replace with css important. — Milos N.
– Milos N., Commented May 12, 2020 at 16:47
Perhaps you can change the class of the element? e.g. #secondHeaderB — akaphenom
– akaphenom, Commented May 12, 2020 at 16:48
I saw that, as I understood, the function works without the !important but if I didn't put this !important on #secondNav, it doesn't work as toggle... — JeanReno
– JeanReno, Commented May 12, 2020 at 16:49

brk · Accepted Answer · 2020-05-12 16:50:21Z

1

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>

answered May 12, 2020 at 16:50

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JeanReno Over a year ago

I can't because the burger logo disapear and the menu is displaying on my media querie.

brk Over a year ago

must be dues to some not required css

JeanReno Over a year ago

After modifiing my css during more than an 1hour, the function works... Thx for your time dude :)

Collectives™ on Stack Overflow

Javascript display block display none

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related