> 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/how-to-add-the-menu-to-your-instant-site-homepage.md).

# How to add the menu to your Instant Site homepage

### 1. **Add a new container to your Instant Site**

Go to the *Website* tab and click *Edit Site*.

<figure><img src="https://2140477459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRAGeUfEU8IMOycjmpVM6%2Fuploads%2FB1JAoGPh11J0Otngix8r%2Fimage.png?alt=media&amp;token=cd768e9a-30aa-4e07-9887-e2fa4e029e8a" alt=""><figcaption></figcaption></figure>

### **2. Add a new section to your site**

Go to *Advanced Solutions* → *Add Custom Code Section*.

<figure><img src="https://2140477459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRAGeUfEU8IMOycjmpVM6%2Fuploads%2FfNWYo2nnoyXZC2Ur17FS%2Fimage.png?alt=media&amp;token=55497544-3472-4f8d-be99-0f3160538816" alt=""><figcaption></figcaption></figure>

### **3. Insert the code inside the new section**

```
<div id="custom-kinvasoft-multilevel-menu-container"></div>
```

Click *Publish*. This is the container where the Multi-level Menu will be injected.

<figure><img src="https://2140477459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRAGeUfEU8IMOycjmpVM6%2Fuploads%2FiUJ07VZ7fR35YwIsyw4X%2Fimage.png?alt=media&amp;token=686695a1-f39a-44c9-9ba0-2f396045c1be" alt=""><figcaption></figcaption></figure>

### 4. Move the container to the correct position

Move the container right below the header. You can place it anywhere on the page, depending on your layout.

<figure><img src="https://2140477459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRAGeUfEU8IMOycjmpVM6%2Fuploads%2FYKfVfdAMqXcnGnczMzKq%2Fimage.png?alt=media&amp;token=44101f68-7bef-4904-9e8d-d324655cb4a1" alt=""><figcaption></figcaption></figure>

You can either hide the site header (default menu) and show only the Multi-level Menu, or keep both: the default menu on top, and Multi-level Menu underneath.

### **5. Add the new container ID in the menu settings**

Go to the Multi-level Menu settings, scroll down to the ***Compatibility options*****&#x20;section**, and add the new container ID (comma-separated).

```
#custom-kinvasoft-multilevel-menu-container
```

<figure><img src="https://2140477459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRAGeUfEU8IMOycjmpVM6%2Fuploads%2FuTuaz8aAeLnkm3oU9jVz%2Fimage.png?alt=media&amp;token=e04bcfef-94d1-4ed9-9446-cee990e691b1" alt=""><figcaption></figcaption></figure>

In my case, I already had `#kinvasoft-menu-static-container` configured, so I simply added the new one like this:

```
#kinvasoft-menu-static-container, #custom-kinvasoft-multilevel-menu-container
```

**Click&#x20;*****Save*****.** Then go to your homepage, and you should see the Multi-level Menu at the top of the page.

If you have any questions, feel free to contact our [support team](https://docs.codpeller.com/en/what-is-codpeller/support) — we’re always happy to help!
