Вот мой сайт: http://stage.samkeddy.com/
Он отзывчив, используя пару медиа-запросов и кнопку мобильного меню на основе javascript.
Вот javascript для кнопки меню:
function toggleMenu () {
if (menuIsVisible == false) {
collapsibleMenu.style.height = 'auto';
content.style.paddingTop = '290px';
menuIsVisible = true;
}
else {
collapsibleMenu.style.height = '0';
content.style.paddingTop = '80px';
menuIsVisible = false;
}
}
так что вы можете видеть, что мне нужно настроить отступ в верхней части содержимого div, чтобы сместить меню
Но если изменить размер до мобильного размера, открыть меню, а затем изменить размер обратно до размера рабочего стола, отступы не фиксируются медиа-запросом, потому что все еще есть встроенный стиль из javascript. Я попытался сделать отступы в настольной версии !важными, но отступы по-прежнему не меняются при изменении размера, хотя в соответствии с это !важно вставляется в строку.
Вы можете проверить сами, открыв размер (как он должен выглядеть), изменив размер на мобильную ширину (навигация исчезнет, и вы увидите кнопку меню), нажав кнопку меню (оставьте меню открытым), затем измените размер вернуться к ширине рабочего стола. Вы увидите, что прокладка все еще там. Если вы осмотрите его, вы увидите, что исходный отступ зачеркнут в пользу встроенного стиля.
Я знаю, что это было бы возможно, отслеживая ширину с помощью javascript и затем устанавливая отступы, но я действительно не хочу этого делать и не думаю, что мне нужно.
РЕДАКТИРОВАТЬ: решено
Во-первых, я должен был добавлять классы, а не добавлять CSS с моим javascript.
Затем я предположил, что размещение !important вне медиа-запроса приведет к тому, что он будет отображаться только на рабочем столе, но он взял на себя все медиа-запросы. Таким образом, размещение только этого в запросе заставило его работать. Обратите внимание, что если бы я использовал 2 отдельных меню (мобильное/настольное), мне бы это не понадобилось, но, поскольку это было исправлено, а #content требовалось дополнение, это нужно было сделать. Но с помощью этой техники вы также можете использовать только одно меню, но таким образом делая высоту для меню. Я продемонстрировал эту технику в codepen: http://codepen.io/anon/pen/JFvay
