Добрый день. Помогите, пожалуйста, советом. Мне нужно чтоб на маленьких экранах и смартфонах стандартное меню исчезало, и появлялась мобильная версия. Сделал вроде все правильно, и при ресайзе окна браузера так все и происходит, но в хроме в режиме тестирования и на мобильнике не хочет работать.
@media screen and (min-width: 993px) and (max-width: 1200px) {
nav.desktop-nav ul.first-level > li a {
font-size: 25px;
}
}
@media screen and (min-width: 768px) and (max-width : 992px) {
body .wrap .top_menu {
width: 100%;
}
nav.desktop-nav ul.first-level > li a {
font-size: 18px;
}
}
@media screen and (min-width: 320px) and (max-width : 767px) {
.top_menu nav.desktop-nav{display: none;}
.top_menu .menu-icon{display: block;}
body .wrap .top_menu {
background: rgba(0, 0, 0, 0) repeat-x scroll 0 0;
margin-top:0;
}
body .wrap .logo {
padding: 0;
}
}