Широкое горизонтальное меню: авто-свёртка пунктов под «ещё», чтобы не выходило за строку навигации

Разбор задачи

Разметка содержит список элементов основного меню и отдельный контейнер overflow. После каждого resize измеряют доступную строку клиентской шириной родителя минус боковые отступы и по порядку прячут элементы начиная с конца строки до тех пор, пока сумма fit ≤ лимита.

function packMainNav(navRoot) {
  const lane = navRoot.querySelector('[data-slot=lane]');
  const extra = navRoot.querySelector('[data-slot=overflow]');
  const items = [...lane.children];
  items.forEach((li) => li.classList.remove('is-hidden'));
  extra.innerHTML = '';

  while (lane.scrollWidth > lane.clientWidth && items.length > 1) {
    const last = items.pop();
    last.classList.add('is-hidden');
    extra.prepend(last);
  }
}
window.addEventListener('resize', () => packMainNav(document.getElementById('main-nav-bar')));
window.addEventListener('DOMContentLoaded', () => packMainNav(document.getElementById('main-nav-bar')));

Для производительности debounce событие resize тем же requestAnimationFrame, чтобы не множить расчёт на мобильных при повороте экрана.

Замечания перед выкладкой

Вносите правки только через среду с бэкапом и понятным diff. Если сниппет идёт в шаблон на Битрикс, проверьте конфликт с уже подключённым jQuery/UI и включите «отложенный» запуск там, где длинный главный файл может обрезать DOMContentLoaded.