CSS Onclick Close (display none) Not Working, Responsive Design

Question

I'm following the w3 tutorials and exploring a responsive design template here (see source code for details): https://www.w3schools.com/w3css/tryw3css_templates_analytics.htm

I'd like to edit the sidebar so that a close button is always displayed, and close the sidebar when clicked. Under it's current design, this only works for the mid-size and small windows.

I tried revising the code to remove the hidden class (so it's always displayed). However, the function does not close the sidebar when clicked:

From:

<a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu">
  <i class="fa fa-remove fa-fw"></i>&nbsp; Close Menu
</a>

To:

<a href="#" class="w3-bar-item w3-button w3-padding w3-dark-grey w3-hover-black" onclick="w3_close();return false;" title="close side menu">
  <i class="fa fa-remove fa-fw"></i>&nbsp; Close Menu
</a>

I'm missing something very elementary here. But I've fiddled with this long enough I'd like to get pointed in the right direction. The code is right, I'm guessing this may be a DOM or bubbling issue, or basic design edit? Thanks!

Answer 1

There appears to be an !important media query CSS rule that's probably blocking your styling from having effect:

@media (min-width: 993px)
.w3-sidebar.w3-collapse {
     display: block!important;
}

I did a document.querySelector("#mySidebar").style.display = "none" and it had no effect. You could remove that !important rule or otherwise work around it...