Как мобильное меню гамбургер сначала сделать с отступом, а потом фиксировать?

Question

[Андрей Филимонов]

Здравствуйте, на сайте есть мобильное меню, его полосочки фиксированы в правом верхнем углу. Добавил сверху блок в 30 px, в десктопе, при прокрутке меню его скрывает и всё ок. А в мобильном виде на него наезжают бары меню. Как сделать, чтобы бары вместе с полоской #header двигались?

#header фиксируется таким вот скриптом

$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 30) $("#header").css({top: '0', position: 'relative'});
else $("#header").css({top: '0', position: 'fixed'});
});
});

но к .navPanelToggle не хватает ума применить

Comments

[Евгений]

Зачем писать стили в js, когда можно добавить класс, и уже от него править "бургер"

[Андрей Филимонов]

Евгений: такой шаблон был

[Александр Лысенко]

Ну поместите эту кнопку в header в качестве inline элемента, пусть взаимодействует с остальными блоками.

[Андрей Филимонов]

AlexanderZe: если просто подставить внутри блоков header, то оно выезжать переставает

[Андрей Филимонов]

если ставить position:relative, то не срабатывает нажатие

[Александр Лысенко]

Андрей Филимонов: Кнопку тег a, а не все меню. Какая разница где она расположена.

[Андрей Филимонов]

AlexanderZe: сделал, посмотрите сейчас. не кликается, не выдвигается

[Александр Лысенко]

Андрей Филимонов: Давайте по порядку. Кнопка должна оказаться на белом или красном поле?

[Андрей Филимонов]

AlexanderZe: белом, как сейчас, но правее

[Александр Лысенко]

Андрей Филимонов: Я вам приведу пример, что вам необходимо сделать, но это лишь визуальное представление, верстка в нем не самая корректная.

Ваш Header должен состоять из трех блоков, где выравнивание задается при помощи float. Дальше вы обязательно должны сделать всему контейнеру clearfix. Для того чтобы сделать это все корректно, посмотрите как у bootstrap реализованы строки с блоками. Flex был бы предпочтительнее, но это дольше для вас.

[Андрей Филимонов]

AlexanderZe: Спасибо большое, но вы понимаете, что в десктопе должно всё оставаться без изменений? Сделать, чтобы header содержал 3 блока, это равносильно переписать всё меню, и вряд ли будет работать, как сейчас

[Александр Лысенко]

Андрей Филимонов: Вы же понимаете что нет )) Сделать три блока — это сделать три блока разметки и разместить в них ваши блоки без изменений. Если вы не справитесь сами, напишите мне на почту, несколько позже я найду время и помогу вам с этим вопросом, если захотите.

[Андрей Филимонов]

AlexanderZe: всё, совсем сломал. не могу сделать, чтобы открывалось меню, вроде все старые стили вернул, кэш сбросил

[Андрей Филимонов]

ссылка перестаёт работать, когда у .navPanelToggle ставить position:relative

[Андрей Филимонов]

задам это отдельным вопросом