Как скрывать меню при разных разрешения?

Question

[Mavran]

У меня есть обычное меню в стандартном разрешение сайта 1200px и когда я изменяю размер для мобильного сайта, место меню у меня появляется кнопка с картинкой для другого меню, при клике на картинку выдвигается меню для мобильного сайта, потом когда начинаешь менять размер сайта это меню остается, как исправить данную проблему? И кстати меню сайта не ровно стоит когда размер сайта под мобильный идет!
Вот ссылка на код!

Answer 1

[Alexander Sydorenko]

Что бы было по центру мобильное меню надо для @media screen and (max-width: 593px)

добавить

ul.navication-menu li a:hover,
ul.navication-menu li a{
    width:100%;
}

чтобы пропадало меню при уменьшении размера стилей мало.. так как вы делаете из js для меню show, то у меню в стилях (в хтмл коде элемента) прописывается display:block, и приоритет этого правила выше, чем правило css в медиа-запросах, поэтому правило не имеет эффекта. Для решения этой проблемы, надо изменить подход к его отображению.. например делать не напрямую ему show, а добавлять класс opened например, для которого при одном расширении будет стоять display:block, а при другом display:none;

Обновил Ваш пример

Comments

[Mavran]

Чтобы я без вас делал Александр? Огромное вам спасибо опять выручили меня, а я тут голову ломаю)

[Alexander Sydorenko]

Рад помочь :)