Приветствую. Не подскажите почему не добавляется класс "header—mobile" когда расстояние

headerMenu меньше или равно 12 пикселям до правого края -

export const adaptiveHeader = () => {
const headers = document.querySelectorAll(".header");
const headerMenus = document.querySelectorAll(".header__menu");

headerMenus.forEach((headerMenu) => {
headers.forEach((header) => {
const observer = new MutationObserver(() => {
const headerMenuDistanceLeft = headerMenu.offsetLeft;
const headerMenuWidth = headerMenu.offsetWidth;
const headerWidth = header.offsetWidth;

if (headerMenuDistanceLeft + headerMenuWidth + 12 >= headerWidth) {
header.classList.add("header--mobile");
} else {
header.classList.remove("header--mobile");
};
});

observer.observe(headerMenu, { attributes: true });
});
});
}

?

потому что это обсервер изменений, а тебе надо обсервер ресайза

Класс "header--mobile" добавился когда расстояние между "headerMenu" меньше или равно 12 пикселям, но не убрался когда оно стало больше 12 пикселей - export const adaptiveHeader = () => { const headers = document.querySelectorAll(".header"); const headerMenus = document.querySelectorAll(".header__menu"); headerMenus.forEach((headerMenu) => { headers.forEach((header) => { const observer = new ResizeObserver(() => { const headerMenuDistanceLeft = headerMenu.offsetLeft; const headerMenuWidth = headerMenu.offsetWidth; const headerWidth = header.offsetWidth; if (headerMenuDistanceLeft + headerMenuWidth + 12 >= headerWidth) { header.classList.add("header--mobile"); } else { header.classList.remove("header--mobile"); }; }); observer.observe(headerMenu); }); }); };

Я её не увидел. Не могли бы вы отправить её ещё раз?

Увидели?

а еще и обсервер написан неправильно

jsfiddle не грузит почему-то

https://jsbin.com/yuhororimi/edit?html,css,js,output

Позже посмотрю

Работает, но с багами

У вас проблема с сеткой. Почему контент вылазит за края экрана, причем в обе стороны? Такого не должно быть, по этому и код не может нормально отработать, так как расчеты скачут. - https://i.imgur.com/meaAvNp.png

Как исправить проблему?)

Я не знаю. Смотрите, как Вы расположили элементы. Скорее всего они имеют фиксированную ширину.