YavaDev

Как-то так https://codepen.io/YavaDev/pen/zYNevvE

Когда то давно делал такое, вот пример

Инклудим файл с переменной:

@@include('./parts/modules/navbar/navbar.html', {
    "page": "page1",
})

Условия в navbar.html:

@@if (page === 'page1') {
    <span>Navbar for page 1</span>
}
@@if (page === 'page2') {
    <span>Navbar for page 2</span>
}

Переменную page и ее значения можете менять как угодно.

На сколько я понимаю, при переходе к якорю браузер скролит страницу так, что бы элемент с якорем был в верхнем левом углу. Ведь существуют и горизонтальные сайты, а не только вертикальные.
В данном случае вы не понтяно зачем делаете так, что бы форма выходила за пределы окна. И тем более смещаете блок с якорем с помощью марджина. И хотя вы обрезаете с помощью {overflow-x: hidden !important;} обзор пользователю, браузер все равно знает, что вы накостыляли. В этом случае и происходит то, что происходит.
Что бы это пофиксить советую сделать так.
Блоку .footer-form вместо margin-left: 20%; дать padding-left: 20%;
Далее у формы .footer-form .formубрать max-width: 90%;.
В таком случае форма не будет выходить за пределы екрана и будет тянутся на всю ширину.
Ну и дальше уже дописываете стили формы, что бы подогнать по дизайну.

И еще. На большом мониторе инпуты в форме становятся больше и бордер инпута становится кривым. Картинка бордера слишком маленькая.

Девтулз Firefox говорит в чем проблема:

Просто добавтье px в keyframes. Пример:

@-webkit-keyframes circle1 {
    0% { r: 20px;}
    15% { r: 30px; cy: -30px;}
    30% { r: 20px; cy: 20px;}
    45% { cy: 10px; }
    60% { cy: 20px; }
}

Если посмотреть исходный код страницы, то видно, что в диве с id="popup" находится форма <form action="/#wpcf7-f431-o3">.
А после загрузки страницы в том же диве уже другая форма <form action="/#wpcf7-f431-o4">, которая, скорее всего, была скопирована с помощью JS из дива с id="popupDefault".
Таким образом JS код плагина CF7 уже не обрабатывает динамически добавленную форму и страница перезагружается.

У плагина ACF есть довольно неплохая документация, стоит ее почитать.
Вот ссылка на поле "Группа", там все описано. И есть примеры вывода.
https://www.advancedcustomfields.com/resources/group/

Уберите пробел между repeat и (
Должно быть так grid-template-columns: repeat(2, 1fr);

Уберите в css у блока .solution свойство transition
Ну и советую поменять в вашем js коде .hide(2000) и .show(2000) на .slideUp(2000) и .slideDown(2000) соответственно. Так анимация будет красивей что ли.

Почитайте здесь для понимания - https://developer.mozilla.org/ru/docs/Web/CSS/box-...

Ну, а после пропишите:

* {
  box-sizing: border-box;
}

Не ленитесь и читайте документацию:
англ - https://getbootstrap.com/docs/4.5/components/modal...
рус - https://bootstrap-4.ru/docs/4.5/components/modal/#...

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

$(".order-time-add").each(function(){
  const spanTime = $(this).parents('.container').find('span.time');
  spanTime.append($(this));
})

Вот пример такой сетки - bootstrap-4.

Этот код прекращает передачу текущего события клика по DOM дереву вверх. Потому $(document) и не отлавливает событие клика по элементам в блоке .basket-wrap.

У меня получилось так

Для начала надо убрать зацикливание слайдера. Для этого пропишите свойство infinite: false
После этого slickSlider уже сам будет давать кнопкам класс .slick-disabled.
Ну а дальше делайте с кнопками то, что вам нужно, например:

.slick-arrow {
  transition: opacity 0.3s ease;
}
.slick-arrow.slick-disabled {
  opacity: 0;
}

Потому что тег <a href="#"></a> это строчный элемент.
Что бы исправить надо кнопке прописать свойство display: block

.card-body {
  display: flex;
  flex-direction: column;
}
.card-body footer {
  margin-top: auto;
}

Ну и в последней карточке "Прием газовых баллонов" у вас отсутвует тег footer.

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

let clickOnButton = true;
$(window).on('scroll', function(){
  if ($(this).scrollTop() >= 500 && clickOnButton){
    $('.departments__button').trigger('click');
    clickOnButton = false;
  }else if ($(this).scrollTop() < 500 && $(this).scrollTop() > 150 ) {
    clickOnButton = true;
  }else if ($(this).scrollTop() <= 150 && clickOnButton) {
    $('.departments__button').trigger('click');
    clickOnButton = false;
  }
})