# Как добавить меню под стандартное меню Магазина

### **Добавляем меню**

<figure><img src="https://1107142492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPi0svwcOAtZ83iMf02nY%2Fuploads%2FItLnJ6LJzXcshoMTBNg4%2Fmenu-fin_1_en.png?alt=media&#x26;token=52486e5b-ed72-4149-9ec6-7e0f3ae91b4c" alt=""><figcaption></figcaption></figure>

Переходим на главную страницу магазине, наводим курсор мыши на стандартное меню и нажимаем правую клавишу мыши, в появившемся окне выбираем "Исследовать элемент", Рис. 2.

<figure><img src="https://1107142492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPi0svwcOAtZ83iMf02nY%2Fuploads%2FHExuMB0rL1gwAVP69Nyl%2Fmenu-fin_2_ru.png?alt=media&#x26;token=7c70f793-df12-4deb-8ecd-ca8bdd9108b9" alt=""><figcaption><p>Рис. 2. Нажимаем "Исследовать элемент"</p></figcaption></figure>

В открывшемся окне смотрим селектор, чтобы при его наведении было выделено всё меню или любой другой блок, после которого меню должно появляться. Выбираем класс контейнера такой, чтобы он больше нигде не повторялся, т.е. нужно максимально индивидуальный (Рис. 3), в примере это <mark style="color:purple;">`.ins-tile--header`</mark>

```html
.ins-tile--header
```

<figure><img src="https://1107142492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPi0svwcOAtZ83iMf02nY%2Fuploads%2FNDuWffXF9xPrjkjZTTv3%2Fmenu-file-3_en.png?alt=media&#x26;token=f8f96116-b592-4beb-9272-feb6502c8643" alt=""><figcaption><p>Рис. 3. Выбираем селектор</p></figcaption></figure>

Берем скрипт

```javascript
<!-- скрипт мультилевел меню -->  
<script>
document.addEventListener("DOMContentLoaded", function() {
   try {
      const announcementBar =
document.querySelector('.ins-tile--announcement-bar');
      announcementBar.insertAdjacentHTML('afterend', '<div id="kinvasoft-menu-static-container"></div>');
   } catch (e) { console.debug(e); };
});
</script>
```

Находим в нем <mark style="color:purple;">`.ins-tile--announcement-bar`</mark> и заменяем его на выбранный нами селектор <mark style="color:purple;">`.ins-tile--header`</mark>

Получается скрипт&#x20;

```javascript
<!-- скрипт мультилевел меню -->  
<script>
document.addEventListener("DOMContentLoaded", function() {
   try {
      const announcementBar =
document.querySelector('.ins-tile--header');
      announcementBar.insertAdjacentHTML('afterend', '<div id="kinvasoft-menu-static-container"></div>');
   } catch (e) { console.debug(e); };
});
</script>
```

Переходим на страницу настроек меню в блок "**Параметры совместимости**" (Рис.4.), в строке "**Container**" прописываем <mark style="color:purple;">`#kinvasoft-menu-static-container`</mark>

```css
#kinvasoft-menu-static-container
```

<figure><img src="https://1107142492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPi0svwcOAtZ83iMf02nY%2Fuploads%2FREZMLIiwwhdSpdsICFuh%2Fcompability.png?alt=media&#x26;token=6f12299c-327b-40f3-b059-e6fd14f1f984" alt=""><figcaption><p>Рис. 4. Строка "Контейнер"</p></figcaption></figure>

Переходим на страницу **Сайт** в блок "**Настройки SEO**", нажимаем "**Изменить**" и добавляем в поле скрипт, Рис. 5

<figure><img src="https://1107142492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPi0svwcOAtZ83iMf02nY%2Fuploads%2F8Vl8kT6nkbFxpwvGST3M%2Fseo.png?alt=media&#x26;token=322e3478-60cb-4e2b-a186-c8fa44a31a07" alt=""><figcaption><p>Рис. 5. Добавляем скрипт</p></figcaption></figure>

Нажимаем кнопку "**Сохранить**". Переходим на главною страницу для проверки. Переходим на страницу витрины и тоже проверяем наличие меню на странице.

### **Показываем строку поиска**

Меню загружается стабильно и работает отлично, но при нажатии на кнопку **Поиск**, строка поиска скрыта под меню. Рис. 8.

<figure><img src="https://1107142492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPi0svwcOAtZ83iMf02nY%2Fuploads%2FbUInV30jp8fououtWAWf%2Fmenu-fin_7_en_1.png?alt=media&#x26;token=7b7c1ac4-eb12-45ff-a248-d13881c99d33" alt=""><figcaption><p>Рис. 7. Строка поиска не видна</p></figcaption></figure>

Настроим видимость строки поиска. Рис. 8.

<figure><img src="https://1107142492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPi0svwcOAtZ83iMf02nY%2Fuploads%2FYXS3EkPhKPDSp8xerhP1%2Fmenu-fin_8_en_1.png?alt=media&#x26;token=f11d7175-dae9-4e33-bc77-0aad53b6a9fe" alt=""><figcaption><p>Рис. 8. Строка поиска видна</p></figcaption></figure>

Для настройки переходим на страницу **Сайт** в блок "**Настройки SEO**", нажимаем "**Изменить**" и добавляем в поле скрипт

```css
<style>
/*For Multi-level menu, See Search 70px*/
.ins-tile--header.ins-tile--left-logo-burger .ins-header__sidebar--search, .ins-tile--header.ins-tile--left-logo-compact .ins-header__sidebar--search, .ins-tile--header.ins-tile--left-logo-detailed .ins-header__sidebar--search, .ins-tile--header.ins-tile--left-logo-search .ins-header__sidebar--search, .ins-tile--header.ins-tile--left-logo-text .ins-header__sidebar--search, .ins-tile--header.ins-tile--center-logo-burger .ins-header__sidebar--search, .ins-tile--header.ins-tile--center-logo-compact .ins-header__sidebar--search, .ins-tile--header.ins-tile--center-logo-detailed .ins-header__sidebar--search {
    margin-top: 70px;
}
</style>
```

Нажимаем кнопку "**Сохранить"** и идем на главную страницу для проверки, если **Поиск** не виден, то очищаем КЭШ браузера или открываем вкладку с сайтом в режиме **Инкогнито**.

Если вам нужно, чтобы строка поиска отображалась ниже, то вам вместо 70px нужно написать свою цифру, например 120px

### **Настраиваем ширину меню**

Если вам нужно на странице витрины, чтобы меню было на всю ширину, то переходим к настройке **Menu bar > Layout > Menu Width** (Рис. 6), выбираем настройку Maximum, нажимаем кнопку сохранить

<figure><img src="https://1107142492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPi0svwcOAtZ83iMf02nY%2Fuploads%2F4eWTDVxt0gAQBqBcb5DH%2Fmenu-file-6_ru.png?alt=media&#x26;token=009fc807-c52f-4cf1-9566-10cb86e9569a" alt=""><figcaption><p>Рис. 6. Настраиваем ширину меню</p></figcaption></figure>

Если у вас есть вопросы или предложения пишите нам в [<mark style="color:purple;">поддержку</mark>](https://docs.codpeller.com/ru/chto-takoe-codpeller/tekhnicheskaya-podderzhka), мы всегда рады помочь.
