Попытки сделать мое меню более отзывчивым, используя код @media

Question

Так что у меня этот код

@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 для большего экрана.

EDIT: проблема в том, что код не работает.

Заранее спасибо

Answer 1

У вас есть точка с запятой в запросе:

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

Просто удалите точку с запятой. Это все.

JS Bin