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

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

<figure><img src="/files/vm8WeHe4YxoM8bCgP7kV" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/nJzXk6EPkvUAuJLBYfhm" alt=""><figcaption><p>Рис. 2. Нажимаем "Исследовать элемент"</p></figcaption></figure>

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

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

<figure><img src="/files/xxSddQ9FdlOGw9OZKSEs" 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="/files/M9Buv9AjauuTV6KIz9JZ" alt=""><figcaption><p>Рис. 4. Строка "Контейнер"</p></figcaption></figure>

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

<figure><img src="/files/LZ4DDFRuNGl0x4Oz0saj" alt=""><figcaption><p>Рис. 5. Добавляем скрипт</p></figcaption></figure>

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

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

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

<figure><img src="/files/Db2Repg0kcWVnyohVFQj" alt=""><figcaption><p>Рис. 7. Строка поиска не видна</p></figcaption></figure>

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

<figure><img src="/files/0nNYqjzwtvWJp94waWd1" 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="/files/UEgjNAJbyR9gTVFpNO3N" alt=""><figcaption><p>Рис. 6. Настраиваем ширину меню</p></figcaption></figure>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.codpeller.com/ru/mnogourovnevoe-menyu/chavo/kak-dobavit-menyu-pod-standartnoe-menyu-magazina.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.