> For the complete documentation index, see [llms.txt](https://docs.codpeller.com/en/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.codpeller.com/en/multi-level-menu/faq/how-do-i-place-the-menu-under-my-stores-main-menu.md).

# 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.