Media query NOT overriding original display styling

Question

i have a mobile menu that is set to display none on load, and then on the media query its set to display block.

I have always done this in the past but had no issues. However this will not work.

When checking it out in firefox inspector, i can see that the css media query is being over ridden by the standard css. Any idea why?

fiddle:

http://jsfiddle.net/4BRRg/

Backup code:

    <nav class="header-nav">
        <ul id="nav">
            <li><a href="#homepage-gallery" class="scroll">Gallery</a></li>
            <li><a href="#homepage-about" class="scroll">About</a></li>
            <li><a href="#homepage-contact" class="scroll">Contact</a></li>
            <li><a href="#homepage-loyalty" class="scroll">Loyalty Card</a></li>
        </ul>
    </nav>

    <div class="header-nav-mobile">
        Menu
    </div>

@media only screen 
and (min-width : 320px) 
and (max-width : 568px) {

.header-nav-mobile {
    display: block;
}

#nav {
    display: none;
}

}

.header-nav-mobile {
    float: right;
    line-height: 40px;
    width: 60px;
    height: 40px;
    text-align: center;
    color: #fff;
    background-color: #404040;
    cursor: pointer;
    display: none;
}

Answer 1

Try putting your media queries below your default css code like so:

.header-nav-mobile {
    float: right;
    line-height: 40px;
    width: 60px;
    height: 40px;
    text-align: center;
    color: #fff;
    background-color: #404040;
    cursor: pointer;
    display: none;
}
@media only screen 
and (min-width : 320px) 
and (max-width : 568px) {
  .header-nav-mobile {
      display: block;
  }
  #nav {
      display: none;
  }
}

Working Fiddle: http://jsfiddle.net/25zJX/1/

Answer 2

the @mediaquery is misplaced, cut and paste it at the bottom.