Как сделать адаптивную шапку? Состоит из троих контейнеров, при уменьшении к 768px средний блок должен исчезать, и появляться только по нажатии на кнопку (которая появляется при этом же условии). После возвращению к формату, больше 1190px, все должно возвратиться к начальным свойствам. Как это организовать?
Медиа-запросами - htmlbook.ru/css/value/media
При 768px скрывать меню и показывать кнопку, если только на css - кнопка может быть чекбоксом. Иначе button и JS
Навигацию нужно сделать fixed высотой - 100vh и шириной как нужно + transform translatex(-100% ). А при нажатии на кнопку - transform translatex(0).
Спасибо, с медиа-запросом все работает на уменьшение media screen and (max-width: 768px). Как сделать что бы при увеличении все возвращалось в исходный вариант?
в media screen and (max-width: 768px) пиши все, что должно произойти при такой ширине. Если вернешь с этой ширины на большую оно отменит эти изменения.
nen0y, или сделай на codepen демку и дай ссылку здесь, так проще разбираться. Если в теории, то maxsolovyov все правильно описал, если не работает нужно смотреть код.
nen0y, Если не работает то, что сказал maxsolovyov, то попробуйте весь код широкоэкранной версии поместить в media screen and (min-width:768px) {
}
(то есть все, кроме того, что внутри (max-width:768px) { }
Тогда не будет конфликтов между классами, но придется дописывать лишний раз один и тот же код в эти две версии, телефонну и десктопную. Прости, может, тупо объяснил.
Простой
