Search code examples
htmlcssmedia-queries

Trying to make my menu more responsive using the @media code

So I have this code

@media all and (max-width: 1400px) and (min-width: 951px;){
    #navi2 {
        display: none;
    }
}

@media all and (max-width: 950px;){
    #navi2 {
        display: initial;
    }
    #navi{
        visibility: hidden;
    }
}

#navi{
    // MENU CODE
}

I wanted to do this to make it kinda responsive, so that navi2 could open if there is a smaller screen. And navi is for a bigger screen.

EDIT: The issue is that the code does not seem to work.

Thanks in advance

Solution

  • You've got a semicolon in your query:

    @media all and (max-width: 1400px) and (min-width: 951px;){

    Just remove the semicolon. That's all.

    JS Bin