1

Добрый день. Помогите, пожалуйста, советом. Мне нужно чтоб на маленьких экранах и смартфонах стандартное меню исчезало, и появлялась мобильная версия. Сделал вроде все правильно, и при ресайзе окна браузера так все и происходит, но в хроме в режиме тестирования и на мобильнике не хочет работать.

@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;
        }
}
2

1 ответ 1

2

Разобрался. Нужно было еще в HTML в HEAD вставить <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.