Strange behavior of media query in CSS. Inheriting attribute values from other statement

Question

Let's say I have

@media all and (min-width: 360px) {
    #navigation {
        background-color: #dddddd; 
        display: block; 
        position: fixed; 
        top: 0px;
    }
}
@media all and (min-width: 760px) {
    #navigation {
        background-color: #111111; 
        display: none; 
        position: fixed; 
        bottom: 0px;
    }
}

this kind of CSS code (assume that I have div id="navigation" tag in the body tag.).

But if I run this code and change the size of browser to see the difference, it won't change as the size changes. The CSS attributes in the first media query statement is applied to the style, except the display attribute.

How do I make the other attributes to behave as it supposed to be?

edit: Here's the codepen for my project: http://codepen.io/thatkoreanguy/pen/mJwPBW

Answer 1

Ok so I am going to assume the main problem here is when you are going to 360px width your div is not sitting at the top of the view port its stuck at the bottom?

When you have a media query it still inherits previous styles if you want to negate any you would have to return them to there default value which for bottom would be auto I believe.