Арсений Матыцин

Первое, что следует взять во внимание, navbar яндекс это просто условно готовая база, которая подойдет для большинства решений, но в момент, когда ты упираешься в дизайн, то он [navbar] работать перестает. К слову, в последней версии вроде прямо готовый модуль убрали и заменили на компоновку.

Дальше, принять тот факт, что тебе придется описывать шапку на 90% самому.

Структурно же у тебя все вписывается в сетку и логику:
container-fluid
→container (верхняя часть шапки)
→container + отрицательный margin или transform для желтой навигации и к ней тебе с наибольшей вероятностью удобно будет использовать flex + justfy-content: space-between.

А про адаптивность говорить нельзя пока у тебя не руках нет макета для мобилок. Но как результат тебе все равно придется описывать самостоятельно, чтобы вписаться в дизайн. Либо по макету, либо брать на себя ответственность за мобильное решение.

PS: в идеале решение должно быть mobile-first (так проще).

Ммм... у тебя обычное вертикальное меню. Горизонтально это когда слева-направо или наоборот.

И вообще тебе не очень-то и нужен jQuery, чтобы запустить анимацию, CSS это вполне умеет, но да, тебе нужно использовать анимацию от jQuery для слайда в сторону, если хочешь минимизировать свои мучения.

Чтобы легче было сделать переключение бургера на крестик можешь воспользоваться ванилкой JS, и привязав бургер, скажем к ment-toggle--burger, а крест к menu-toggle--times просто переключать их. Привязав это к примеру бэкграунд картинку крестика и бургера.

Вообще лучше сделать анимацию на SVG, или 3 span-а анимировать из бургера в крест, но сдается мне, это сложновато для тебя по твоему вопросу. Тем не менее, мотай на ус.

1. Фоновые картинки не перетаскиваются.
2. Если поверх изображения в его полный размер кинуть пустой див с позиционированием z-index-а выше, то тоже нельзя будет захапать (как в инсте).

У SVG нет фона, есть fill у объектов (заливка). А фон ты задаешь элементу, в котором находится SVG.

PS: либо у тебя может быть полигон на весь размер SVG, который будет «лежать сзади», но все равно у него будет fill для заливки.

Сетки, построенные на флексбоксах и гридах, по-умолчанию наследуют высоту соседнего блока.

css.yoksel.ru/svg-sizes

Тебе необходимо вписать видео в область, а не, чтобы видео задавало свои параметры. Поможет тебе в этом object-fit(сразу обрати внимание на поддержку) или просто 100%-ная ширина видео.

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

Ну как найти кусок кода, который тебе надо скрыть ты уже знаешь. Ты прямо на полпути к истине.

Теперь осталось только изучить JS или CSS, чтобы научится писать стили. Для решения проблемы хватит банального display:none;.

Потом, может, немного PHP, чтобы понять, как это работает, а дальше вообще красота → изучить, как работает сам WP, чтобы действительно понять, как на самом деле это работает, как наследуется и как переопределяется для достижения результата.

Если тебе не нужен интерактив и сайт несет исключительно информационную нагрузку, работает потому что он просто работает → да. Абсолютно нет смысла напихивать в проект то, чего там быть не должно.

Более того, возьми на заметку генераторы статических сайтов типа Jekyll. На них такое удобно собирать.

А умников, которые кричат, что в современном сайте должно быть всего и поболе не слушай. Должно присутствовать только то, что должно работать.

Это не «современный дизайн», это пустые украшалки.

И делаются они с помощью псевдоэлементов (так проще) с абсолютным позиционированием и через background свойства с репитом. В комментариях тебе Рустам Байназаров дал корректный референс.

У тебя все работает, но твой урок по ютубу опоздал лет на 5.

К слову, это называется резина, а не адаптив.

Если у тебя на активный пункт меню вешается класс типа .menu.active, то ты можешь дополнить свою конструкцию с помощью .menu:not(.active):hover.

Это не размытие, а уход в прозрачность.

Поможет:
1. linear-gradient — если тебя устроит увод в прозрачность только фона картинки.
2. svg mask — если надо сделать в тютельку, как на пикче, уводя в прозрачность еще и текст.

Чтобы в принципе верстать макеты, а нестандартного тут ничего нет (вообще, какие стандарты-то?) тебе необходимо уметь видеть его логические части.

В данном примере есть шапка, которая к карусели никак не относится, кроме того, что «лежит» поверх.

Сама карусель это другой уровень, как я понимаю презентация во весь экран со сменой снизу вверх, следовательно, у тебя слайды с навигацией слева, абсолютно спозиционированной поверх всех слайдов, ведь тебе надо отобразить и сменить весь слайд безболезненно, внутри него уже простая колоночная разбивка с отступами + абсолютно спозиционированный блок для запуска видео.

Впрочем, самый безболезненный путь → сверстать все на абсолютном позиционировании. А потом обосраться на разных экранах. Поэтому да, флексы\гриды, суть неважно, это необходимое решение + то, что я описал выше.

Ну и немного приправь это дело JS. Где-то в интернетах, я знаю точно, есть уже готовый плагин для такого формата слайдов.