Помогите разобраться с отступами.

Всем добрый день.
Пересмотрел весь интернет ничего путного не нашел…
Существует сайт. - Сайт - он на бесплатном хостинге и домене…так что антивир может ругаться.

Столкнулся с проблемой, которая не дает покоя.
Создал адаптивное меню, при просмотре на телефоне. Когда нажимаем на саму меню…Маргин нижний толкает главный текст страницы вниз…на тот самый отступ который задан вначале.

Собственно сам вопрос, как сделать так чтобы при нажании на кнопку…тот маргин нижний становился меньше и сам главный контент не скакал так далеко вниз?
пробывал через + или другие варианты селекторов, ничего не получается

Исходя из вашей разметки никакой селектор не сделает отступ меньше. Вы можете задать отступ непосредственно списку меню, тогда его поведением можно будет управлять с помощью + или ~
Еще вы можете спозиционировать меню, тогда его появление не будет сдвигать весь контент страницы вниз.

1 лайк

Я вообще немного про другое.
Спозиционировать это не совсем то.
Например у нашего хедера есть отступ снизу 15px
снизу контент отодвинут на 15px…
Но стоит нам раскрыть меню, контент отодвигается от края самого меню …
Ну и вопрос оттуда и состоял…можем ли мы при нажатии кнопки (как нибудь так #btn-menu:checked) задавать отдельно нашему хедеру маргин снизу к примеру 5px
но когда отжимаем кнопку, то маргин возвращается к своим 15.

я просто хочу понять, реально ли такое реализовать. Или тут уже надо прибегать к яваскриптам

Я вас поняла. Не можете. Потому что кнопка открытия/закрытия меню находится внутри header. Никакой селектор не может выбрать родительский элемент через дочерний. Без js никак.

1 лайк

Всё, сделал… Спасибо.

Каким образом?

Исходя из совета выше, убрал отступы у хедера.
Сделал отступы на нормальном разрешении у - nav ul . делаем отступ в 10em

После того, как вступает @media - можно убирать этот отступ. ( хотя я его не трогал)
у нас по идее пропадает это меню и этот отступ никуда не девается.

Вступает в силу кнопка. теперь нужно делать отступ от нее. #btn-menu + label …делаем отступ от нее, ну к примеру 5em.
А при открытом состоянии - #btn-menu:checked - margin-bottom: -3em; сделал так…ну тут уже на свой вкус и цвет, можно просто обнулить…и в итоге смотрится более менее.