You can configure up to eight levels of navigation menus for your storefront. By default, only the first and second levels are active, so you'll need to adjust some of the settings in your Admin Area to activate levels 3-8.

Setting Up Additional Navigation Menus

To enable additional navigation menus on your storefront:

1. Go to Design > File Editor in your Admin Area.

2. In the Shortcuts table, select template_x.html, where "x" is the name of your store's active theme. 

The code displayed here is the HTML code for the theme. We recommend that you create a backup copy of this code before starting on your edits.

3. Search the HTML code for the following text: display_menu_1. There is a large block of HTML code surrounding this text. This is the HTML code that creates each individual navigation menu.

4. Navigation menus 1 and 2 are already created. Copy and paste the block of code that generates each navigational menu to create additional levels.

The HTML code should look something like this:

<div id="display_promotions_20">Display_Promotions</div>
      <table width="155" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="155" height="22" align="right"
 class="navtitle colors_menutitletext"
 bgcolor="Menu1_Title_BgColor">
 Menu2_Title<img src="Tech Writing/vspfiles/
 templates/55/images/clear1x1.gif"
 width="5" height="1"></td>
        </tr>
        <tr>
          <td width="155">
          <div id="display_menu_1">Display_Menu
 1</div>
          </td>
        </tr>
      </table>

5. Copy the HTML from your theme file and paste it below the last line of code corresponding to the last navigation menu in the theme.

6. Change the number in the text, display_menu_1 to reflect the navigation menu being configured.

7. Click Save to update the theme file.

Setting Up Styles for New Navigation Menus

Once the site is published, the additional navigation menu(s) will appear. However, you might also see that the style properties of the navigation menus don't match. This may be due to CSS code that must be implemented for each of the navigational menus.

Note that this will differ depending on the theme you're using.

1. Within the File Editor page, navigate to the following path within the Volusion store's file structure: 

wwwroot/v/vspfiles/templates/XX/css/Navigation.css 

(replace "XX" with the number or name of your store's active theme)

2. Once this CSS file displays in the file editor, you will see some CSS code. Each line of code will begin with "#display_menu_x.nav...", where "x" represents a nav menu ID.

3. Highlight and copy the lines of CSS code that pertain to the navigation menu (e.g. all lines of CSS that pertain to navigation menu 1).

4. Paste this CSS code below the last line of code within this page.

5. Now, rename the #display_menu_x within each line that was just pasted to refer to the nav menu that was just created in the steps above.

6. Repeat this process for any additional nav menus that were created.

7. Click Save.

8. The newly created navigation menus will be configured to have the same CSS styles as the pre-existing nav menus on your storefront.

Summary

The flexibility of your Volusion store allows plenty of room for menu customization. For more information, see the "Advanced Navigation Menu Customization" section of our article on customizing navigation menus.

Did this answer your question?