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

Adding the menu

Figure 1. Multi-level menu

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 2. Click "Inspect"

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

.ins-tile--header

Figure 3. Choose the selector

Now take the script

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

<!-- скрипт мультилевел меню -->  
<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

#kinvasoft-menu-static-container

Figure 4. The "Container" field

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 5. Adding the script

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

Fig. 7. Search bar is not visible

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

Fig. 8. Search bar is now visible

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

<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 6. Adjusting menu width.

If you have any questions or suggestions, feel free to reach out to our support — we're always happy to help.