# How do I place the menu under my store’s main menu?

### **Adding the menu**

<figure><img src="/files/bTKk6HlQWey58E2QOFV0" alt=""><figcaption><p>Figure 1. Multi-level menu</p></figcaption></figure>

Go to your store’s main page. Hover your mouse over the standard menu, then right-click on it. In the menu that appears, choose **"Inspect"** (see Figure 2)

<figure><img src="/files/jyyFNX9YB1Vss119zk4K" alt=""><figcaption><p>Figure 2. Click "Inspect"</p></figcaption></figure>

In the window that opens, look at the selector and make sure it highlights the entire menu (or any other block where you want your custom menu to appear under). Choose a container class that’s unique — one that doesn’t repeat anywhere else (see Figure 3).\
In our example, the class is `.ins-tile--header`

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

<figure><img src="/files/7j57v5DMEbhQCtgIAkkn" alt=""><figcaption><p><strong>Figure</strong> 3. Choose the selector</p></figcaption></figure>

Now take the script

```javascript
<!-- Script for Multi-level menu -->
<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>
```

Find `.ins-tile--announcement-bar` in the script and replace it with your chosen selector — for example, `.ins-tile--header`

Your updated script should now look like this

```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>
```

Go to the menu settings page and scroll down to the **Compatibility Parameters** section (Figure 4). In the **Container** field, enter: `#kinvasoft-menu-static-container`

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

<figure><img src="/files/RWhfmmFJhTgK03LTZAzY" alt=""><figcaption><p>Figure 4. The "Container" field</p></figcaption></figure>

Go to the **Website** page and open the **SEO Settings** section. Click **Edit** and paste the script into the field (Figure 5). Click **Save**.

<figure><img src="/files/FJSCThO2hMKD9ElcXKeV" alt=""><figcaption><p><strong>Figure 5.</strong> Adding the script</p></figcaption></figure>

Then go to your **main page** to check if the menu appears correctly.\
Also visit your **storefront** page to make sure the menu is displayed there too.

### **Show the search bar**

Once you’ve placed the menu and enabled the search bar, the menu loads smoothly and works great. However, when clicking the **Search** button, the search bar may be hidden behind the menu (see Fig. 7).

<figure><img src="/files/ZUTqUj5NJUqjuPq8I3dL" alt=""><figcaption><p><strong>Fig. 7.</strong> Search bar is not visible</p></figcaption></figure>

Let’s fix that by adjusting its visibility (see Fig. 8)

<figure><img src="/files/x7x66LLxu2jsgBatLuJ1" alt=""><figcaption><p><strong>Fig. 8.</strong> Search bar is now visible</p></figcaption></figure>

To fix it: Go to **Website** → **SEO Settings** in your store admin. Click Edit and paste the following script in the code field.

```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>
```

Save the changes.

Visit your storefront to check the result.

If the search bar is still hidden, try:

* clearing your browser cache, or
* opening the site in **Incognito mode**.

**Tip**: If you want the search bar to appear lower on the page, increase the value (e.g., replace `70px` with `120px`) in the script.

### **Adjusting the menu width**

If you'd like the menu to stretch across the full width of the storefront,\
go to **Menu bar > Layout > Menu Width** (Figure 6), select **Maximum**, and click **Save**.

<figure><img src="/files/e3mskIVdbMB7reyapxOO" alt=""><figcaption><p><strong>Figure 6.</strong> Adjusting menu width.</p></figcaption></figure>

If you have any questions or suggestions, feel free to reach out to our [<mark style="color:purple;">support</mark>](/en/what-is-codpeller/support.md) — we're always happy to help.


---

# 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/en/multi-level-menu/faq/how-do-i-place-the-menu-under-my-stores-main-menu.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.