Как сверстать данную часть header?

neFran4yz,

так как они зеркально расположены

Я не вижу в макете зеркального расположения кружков относительно ссылок.
На глаз так вообще кажется, что они расположены абсолютно одинаково относительно центров ссылок.
Если это не так, то разумеется разные или дополнительные классы.

Есть ли разница каким способом добавлять обработчик события в js, конкретно элементу или всему документу, смотря со стороны производительности?

AlexRas,

тут без вариантов получается

Ну как без вариантов...
Есть оверлей, на который можно повесить клик.
Есть popover, которые сами закрываются по клику мимо себя (конечно, если не manual).
Так что варианты всё таки есть.

Как сверстать данную часть header?

neFran4yz, можно не объединять, если не хочется (если вы про сердечко с корзинкой).
Используйте флексы+margin или гриды.

Но по логике у вас справа три элемента:
- поиск
- пользовательская менюшка каталога (избранное и корзина)
- кнопка
Эти три компонента опять таки, можно обернуть, а можно и не оборачивать, если не хочется/неудобно.

Пока не понятно какая у вас разметка и что не получилось со стилями.

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

align-items:strench

Это поведение по умолчанию, его можно не писать. Да и не искать, если предварительно не сломать.

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

FavnAristotel, люблю огрызки от вопросов. Они дают столько развлечений: вытянуть из спрашивающего одну часть, потом другую, потом догадаться, что истинный вопрос вообще в другом. А он тебе в ответ "нет, не подходит, старайся дальше, неумёха".

Что мешает сразу задать вопрос со всеми критическими нюансами?

там много бордеров

Где там? Сколько много?
"Там" на скрине я вижу два.

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

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

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

1. Задавайте бордеры не логотипу, а хедеру и меню
2. Используйте псевдо, впишите в тот же грид/флекс (абсолютить не нужно)
3. Не используйте паддинги, если нельзя, замените на центрирование
И ещё пачка аналогичных вариантов

Как лучше реализовать данный блок?

MaxKeany, больше, того, ничего не мешает применить гриды или флексы к table, если есть необходимость.

Как в react сделать переход на другую страницу только для Desktop?

Первая же ссылка в гугле https://sky.pro/wiki/html/adaptivniy-render-v-reac... и т.д.

Как изменить html при помощи jquery?

UthvfyV,
Действительно, зачем тут jQuery?
И что вы делали и что не получилось?

Порядок действий такой: разбейте задачу на мелкие и понятные. Гуглите по одной.
Например:
- Найти коллекцию нужных элементы
- Перебрать её
- Получить текст
- Получить класс
и т.д.

Как мне сделать слайд с помощью Swiper так, чтобы при адаптации один слайд был виден наполовину?

Figaro01, 0.5 не работает?
per view auto тоже?

Как мне сделать слайд с помощью Swiper так, чтобы при адаптации один слайд был виден наполовину?

Figaro01,
Один слайд = 1
Полтора слайда = 1.5

Как мне сделать слайд с помощью Swiper так, чтобы при адаптации один слайд был виден наполовину?

Figaro01,
Вот это свойство https://swiperjs.com/demos#slides-per-view отвечает за количество отображаемых слайдов.

Как мне сделать слайд с помощью Swiper так, чтобы при адаптации один слайд был виден наполовину?

Варианты из документации и демок не подошли? Что именно не получилось с ними?

Почему некорректно масштабирутся верстка в Windows 11 и Яндекс Браузере?

its2easyy, вот запихивать туда то, что не влезает это действительно странно. Мы не знаем о каком макете речь и что в нём происходит, поэтому рассуждения о том, стоит что-то перестраивать на таком вьюпорте или ещё нет, не имеют особого смысла.

Как решить проблему со смещением макета и подогнать контейнер под размер картинки?

Возьмите masonry-скрипт без участия гридов.

Почему некорректно масштабирутся верстка в Windows 11 и Яндекс Браузере?

its2easyy, это вопрос сначала к дизайнеру.
И нет никакого дефолтного у всех одинакового масштабирования винды. Оно, дефолтное, зависит от монитора/устройства.

Почему некорректно масштабирутся верстка в Windows 11 и Яндекс Браузере?

Попросите открыть это https://www.esolutions.se/en/test и сделать скрин.
Будет виден настоящий размер вьюпорта.
Так и вы и клиент увидите, что у него на самом деле.

А дальше по обстоятельствам увиденного.

Почему эффект применяется только к одной кнопке из трёх?

Deita, варианты починки бага со скруглением https://sitist.ru/bug-border-radius.html

Как сделать кнопку написать в ватсап с ссылкой на товар?

Mracula, вы чудесно формулируете вопросы.

Не формируется ссылка и название товара

Ну и при чем тут сам ватсап и то как вставить ссылку?

Берем, делаем ссылку ручками

<a href="https://wa.me/79999999999?text=Хочу%20получить%20этот-товар%20https://ya.ru" class="btn btn-default btn-whatsapp" target="_blank">В WhatsApp</a>

убеждаемся, что так всё работает.
Текущий вопрос считаем закрытым и идём разбираться с тем, откуда берется {{ product.name }} и его ссылка и как её подставить, чтобы всё заработало.