尝试使用@media 代码使我的菜单更具响应性

Trying to make my menu more responsive using the @media 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
}

我想这样做是为了让它有点响应，这样 navi2 就可以在屏幕较小的情况下打开。 navi 是为了更大的屏幕。

编辑：问题是代码似乎不起作用。

提前致谢

您的查询中有一个分号：

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

只需删除分号。就这些了。

JS Bin