I'm posting this in the CSS forum, but I'm actually not sure if that's right. It might be CSS, or CSS and HTML, or javascript, no idea.

I'm working on a responsive design, and the media queries work great. I can change styles and layout as needed.
But now I'm trying to make the top menu bar become a button for mobile screens, and use javascript to toggle the div with the menu options between hidden and visible.
Works fine also.

The problem is when resizing the window.
1) As long as I don't click the button, when I go from "big" to "small" the menu bar disappears and the button appears, and when I go from "small" to "big" the button disappears and the menubar appears. Fine.
2) As long as I stay "small" and click the button, the menu bar appears/disappears. Perfect.
3) But when I'm "small" and start clicking the button, and then resize the window back to "big", if the menu bar is hidden, it doesn't reappear! Oops.

It seems like changing the display style with javascript messes up the changing of display style with media queries.

I've searched, but didn't find any working solutions. This stuff (JS) seems to work only in FF.

Is there a CSS solution? Or do I have to move the question to the JS forum?

Here is the code:
Code HTML4Strict:
<div class="navbar">
 
  <a class="brand" href="#">
    <img src="img/logo.png" />
  </a>
 
  <a class="btn btn-navbar" href="javascript:togglediv('navigation');">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>
 
  <div id="navigation" class="nav-collapse collapse">
    <ul class="nav-list">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#updates">Updates</a></li>
      <li><a href="#screenshots">Screenshots</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
 
  <div class="clear"></div>
</div>
main css
Code CSS:
.navbar .btn-navbar {
  display:none;
}
media query
Code CSS:
@media screen and (max-width: 700px) {
 
.navbar .btn-navbar {
  display:inherit!important;
}
 
.navbar .nav-collapse {
  display:none;
}
 
}
Code JavaScript:
  function togglediv(divname) {
    var mydiv = document.getElementById(divname);   
    if(mydiv.style.display == "block") {
      mydiv.style.display = "none";
    } else {
      mydiv.style.display = "block";
    }
  }