Алексей Голягин

Причем здесь модальное окно? Вам нужна выпадающая по клику поисковая строка (обычный скрытый div с формой поиска, который становится не скрытым при клике на иконку). По факту это к bootstrap не относится, обычный JS и CSS.
Загуглите как добавить/убрать класс при клике. Вот описана верстка шапки на бутстрап, как раз с выпадающей формой поиска.

Чет прям какой то трэш с html и css )))

.container-fluid .row {
  margin-left: -5%;
}

.img-fluid {
  padding-left: 50%; /* Отступы в процентах */
  max-width: 200%; /* Максимальная ширина 100% */
  max-height: auto; /* Максимальная высота автоматически */
  left: 0;
  width: 200%;
  height: 600px; ...

- это вас кто так научил?)))

<div class="col-md-6">
              <div class="col-12">
                  <div class="img-fluid" alt="Image"></div>
              </div>
          </div>

- col в col обычно не вкладывают (надо .row > .col)
В общем либо у вас учителя прям печальные, либо верстка это не ваше)

Чтобы человек при заходе на сайт сразу увидел модальное окно, то в верхний div добавьте класс show и стиль display: block как подсказал выше Nik Faraday. Но вам судя по комментариям нужно немного другое: чтоб когда человек заходил на сайт оно автоматом открывалось при помощи JS ... и скорее всего не прям тут же, а с задержкой к примеру в пару секунд (по таймеру), тогда есть как минимум 3 варианта (JS):

1. использование функции setTimeout
   
2. использование события DOMContentLoaded
   
3. использование события load
   

Вот пример JS 1го варианта, конкретно под Bootstrap 5:

// Получите ссылку на модальное окно
const myModal = new bootstrap.Modal(document.getElementById('myModal'));
// Откройте модальное
myModal.show();

Источники: web-revenue.ru, bootstrapdocs.ru (раздел FAQ).

Если вы обновились до modx 2.8.6, то здесь описано как решить проблему..

Попробуйте обновить движок до 2.8.5 и поставьте php 7.4

1. Если в поле Content (содержимое), то установите редактор TinyMCE RTE
2. Если в коде - то либо руками, либо сажать на компоненты MIGX, PageBlock
3. Если в галереях (Gallery и т.п.), то там есть поля которые можно использовать под ALT - только главное чанки вывода фото правильно разметить

<div class="row ">
   <div class="col-sm-6">
        логотип
    </div>

    <div class="col-sm-6">
       <div class="row">
             <div class="col ">
                  CONTACTS
             </div>
              <div class="col">
                  форма поиска
              </div>
       </div>
     </div>
</div>

Установите VPN и будет вам доступ. Например iTop VPN - бесплатный и работающий в РФ

Почитайте вот эту статью: https://web-revenue.ru/modx-revo/migx - посмотрите на типы ввода полей и создание конфигураций. Типы ввода указываются при создании конфигураций в поле input TV type

[[#20.some_tv]] - здесь:
some_tv - название TV поля;
20 - id ресурса где заполнено TV some_tv
Следовательно выводим где надо, примерно так:

[[pdoResources?
&parent=`0`
&resources=`[[#20.some_tv]]`
&tpl=`mychank`
&includeTVs=`some_tv`
]]

Подключите jquery

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Если в ручную якоря создавать, то делаете TV с типом ace (нужно установить пакет ace), в нем уже пишите само содержание (якоря), к примеру так:

<ul>
    <li><a href="[[~8]]#chto-takoe-filtry">Что такое фильтры?</a></li>
    <li><a href="[[~8]]#vyhodnoj-filtr">Выходной фильтр</a></li>
    <li><a href="[[~8]]#modifikatory-vyvoda">Модификаторы вывода</a>
        <ul>
            <li><a href="[[~8]]#uslovnye-modifikatory-vyvoda">Условные модификаторы вывода</a></li>
            <li><a href="[[~8]]#modifikatory-vyvoda-stroki">Модификаторы вывода строки</a></li>
            <li><a href="[[~8]]#kehshirovanie">Кэширование</a></li>
            <li><a href="[[~8]]#ispolzovanie-modifikatora-vyvoda-so-svojstvami-tega">Использование модификатора вывода со свойствами тега</a></li>
            <li><a href="[[~8]]#sozdanie-polzovatelskogo-modifikatora-vyvoda">Создание пользовательского модификатора вывода</a></li>
        </ul>
    </li>
    <li><a href="[[~8]]#cepochka-neskolko-vyhodnyh-filtrov">Цепочка (несколько выходных фильтров)</a></li>
  <li><a href="[[~8]]#custom">Примеры пользовательских фильтров вывода</a>
      <ul>
          <li><a href="[[~8]]#sozdanie-polzovatelskogo-modifikatora-vyvoda">Создание пользовательского модификатора вывода</a></li>
          <li><a href="[[~8]]#primery">Примеры</a>
            <ul>
              <li><a href="[[~8]]#alternateclass">alternateClass</a></li>
              <li><a href="[[~8]]#parselinks">parseLinks</a></li>
              <li><a href="[[~8]]#parsetags">parseTags</a></li>
              <li><a href="[[~8]]#parsetags-1">parseTags</a></li>
              <li><a href="[[~8]]#shorten">shorten</a></li>
              <li><a href="[[~8]]#substring">substring</a></li>
              <li><a href="[[~8]]#numberformat">numberformat</a></li>
              <li><a href="[[~8]]#primer">Пример</a></li>
            </ul>
          </li>
      </ul>
  </li>
</ul>

Здесь [[~8]] восьмерку меняете на id документа текущего, соответственно к заголовкам вам нужно прописать id, например <h2 id="chto-takoe-filtry">Что такое фильтры?</h2>
Администрировать гиморойно, зато в плане SEO можно туда любые ключи запихать)
Либо можно написать сниппет который сам все будет делать, вот в качестве примера можете взять: Автоматическая генерация оглавления страницы.

В системных настройках установите как минимум следующие значения у ключей:
friendly_urls - да
friendly_urls_strict - да
request_method_strict - да
Если у вас транслит установлен, то
friendly_alias_translit - russian
Так же у вас должен в коне сайта быть переименован файл ht.access в .htaccess (при условии что хостинг с apach) и должна быть включена функция Mod_Rewrite.
Если апача на хостинге нет, стоит чистый Nginx, то в конфигурацию добавьте строки:

location / {
        try_files       $uri $uri/ @rewrite;
    }
    location @rewrite {
        rewrite         ^/(.*)$ /index.php?q=$1;
    }

Это мой бывший проект (продан). Там просто залиты оригинальные примеры и частично переведены (вот ссылка на свежие примеры с гитхаба) - скачивайте, и смотрите в редакторе)

<span class="search_cont">[[+total]]</span> замените на

<span class="search_cont" id="mse2_total">{$total ?: 0}</span>

Вам в комментариях правильно порекомендовали, в большинстве случаев лучше использовать классы, особенно когда блоки повторяются, по этому сделаю разметку на классах.
Допустим ваш блок имеет следующую HTML разметку:

<div class="halloween-partyIcon">
    <img src="путь-до-изображения" alt="...">
    <div class="title-party">Заголовок</div>
</div>

при такой разметке при помощи псевдокласса hover, вы не сможете реализовать, чтобы текст в "title-party" затемнялся при наведении на картинку. В данном случае можно затемнить этот текс при наведении на сам блок (обвертку) с картинкой, например так:

.halloween-partyIcon:hover .title-party{font-weight:bolder}

Для главной выбирайте коммерческий ВЧ ключ, хоть тот же "логопед в Санкт-Петербурге" - в выдаче да агрегаторы и в топ главной вы не встанете 95%) - с агрегаторами не нужно главной соревноваться, просто добавьтесь в них и где можно оставить ссылку на сайт оставляйте.

А вот дальше уже внутренними страницами можете получать трафик, хоть коммерческий, хоть информационный. Ключевым фактором в вашем случае будет уровень конкуренции. Для информационки уровень конкуренции можно смотреть в мутагене - выбирать ключи желательно с конкуренцией ниже 12. Для коммерции к примеру в Seranking.