Navigation Menus

Nearly every customer who shops in your store will interact with the navigation menus, so the design and functionality of your menus are important details to consider when you’re customizing your store. An easy-to-use and attractive navigation menu can really enhance the shopping experience for your customers.

Also keep in mind that since navigation menus are visible on every page of your store, they’re prime real estate for posting links to other pages or sites.

Contents

The Basics – Adding Categories to a Navigation Menu

To view the menus and categories you currently have set up in your store, go to Inventory > Categories. Categories that contain subcategories are expandable by clicking the  icon next to it.

From here you can change menu titles, edit categories and subcategories, and reorganize the order in which they are displayed by dragging and dropping them.

To add a new category:

  1. Click Add.
  2. Enter a Category Name and select the menu in which you want it displayed from the Show in Menu drop-down menu.
  3. Click Save.

To move an existing category to a different menu:

  1. Click View List.
  2. Click on the Category number.
  3. Select the menu in which you want it displayed from the Show in Menu drop-down menu.

For more information, see Categories.

Advanced Navigation Menu Customization

To customize your menus, go to Design > Navigation Menu in your Admin Area.

From here, you can change style settings and menu formats for the vertical or horizontal navigation bars within your store template. Your store’s navigation menu consists of the list of categories and promotions that can be configured to display on your storefront.

Basic Menu Settings

The display settings for each navigation menu level within your storefront can be configured so each menu level is independently styled.

The settings that can be configured for each navigation menu level change depending on the display type chosen for each menu. All possible Navigation Menu settings are detailed below:

Navigation Menu Settings

Menu Title

In most store templates, each section of the main navigation menu will have a label assigned to it, except top navigation menus. The different navigation menu sections can be labeled by entering text into the Menu Title field. There is a 30-character limit for this field.

Text Title Color

Assign a color to the text entered into the Menu Title field. Enter a 6-digit HTML color code or click the icon to select a color from the color palate.

Title Background Color

Select a color for the background area behind a navigation section header title. Enter a 6-digit HTML color code or click the icon to select a color from the color palate.

Menu Type

Each navigation menu that displays on your storefront can be assigned one of 11 different formats. Please refer to Menu Types for an explanation of each one.

Alignment

Choose a menu alignment from the drop-down list. Menus can be set to display vertically or horizontally. Note that the ability to use this function effectively may depend on the initial layout of the store template.

Menu Width

Only available with the Rollover Colors Popout menu type – sets the physical width of the menu elements that "pop out" from the menu.

Dropdown Levels

Only available with the Rollover Colors Popout and List Items Popout menu types – limits the depth at which the system will allow sub-menus and sub-sub-menus to be opened.

Divider

A divider separates each of your menu items in the menu section. Choose from no divider, a basic vertical line divider, or enter custom text to act as the menu element divider.

Text Color

Set menu item text color for each item within the menu section.

Text Color Hover

Since each menu item behaves as hypertext link, you can set the text to change to a different color when someone hovers over it with their mouse cursor.

Background Color

Only available with the Rollover Colors or Rollover Colors Popout menu types – set specific background colors for elements within a navigation menu.

Background Color Hover

Only available with the Rollover Colors or Rollover Colors Popout menu types – set specific background colors to change when visitors hover over elements within the navigation menu.

Custom Item HTML

Only available when choosing the Custom menu type – disables all other menu settings in favor of a text box that will allow advanced users to enter custom HTML code to design their menu and menu links.

Menu Types

Each menu within your storefront can be set to 1 of 11 specific types, each with its own specific settings or display effects.

Rollover Colors

Choosing this menu type will allow the store's navigation menu to change either the text color or background color of each element within the menu level. This menu type is quite simple and can be used to create a highlighting effect whenever a menu element is moused over. 

Rollover Colors Popout

Very similar to the Rollover Colors menu type, this option lets you assign colors to navigation menu item text and backgrounds as well as alternate colors for each to switch to when rolled over with a mouse. Additionally, sub menu items (such as categories) will pop out from their parent elements in the menu when they are moused over. 

The width of the menu popouts can be adjusted, as well as the number of levels (between 1 and 3) the popout system is allowed to go when mousing over elements.

Rollover Images

Navigation menu elements within your storefront can be represented by image files, as opposed to basic text and links. Note that this option may be the default setting for some store templates. If it is not, you may be required to generate and upload your own images for use with this menu type. These images will be contained within the directory for the actual template being used for your storefront. 

For troubleshooting issues with your Navigation Menu images, see How to Use Images in Menus Instead of Text.

Rollover BG Images

Similar to the Rollover Images menu type, navigation menu items will display a specific image when the basic navigation element text is moused over. As with Rollover Images, you may have to generate and upload your own images to your store's active template directory. See Tips and Special Settings below for more information. 

BG Images

This menu type displays each navigation menu as a basic link. However, this option will display a specific image within the background of the navigation element. As with any menu type using background images, you may have to upload your own images. 

Links

Displaying navigation menu elements as a list of links is the most basic menu option available. No additional features such as bullet images or background color/image settings are available with this setting. Text color and rollover color for text are still customizable with this menu type. 

Tree Always Expand

This menu type will set all elements within the navigation menu to display in a bulleted list. For any sub-elements or sub-categories that have been configured to this navigation menu, elements will display below their parent elements, indented and with an alternate bullet image to show that these elements have a parent-child relationship with their associated categories. 

Shoppers can either click on a specific category link in the navigation menu or click on a sub-category link to directly view that sub-category's contents.

Smart Tree Expand

This menu type behaves like the Tree Always Expand menu type with the exception that any sub-category elements will not be automatically revealed within the navigation menu. Links will be displayed beneath the main category link in the navigation menu when a shopper clicks on a category link that contains sub-categories. 

List Items

Similar to the Links option, this menu type will display a list of all categories or navigation elements in an unordered list, complete with bullet images. 

List Items Popout

This menu type is intended for use with responsive templates. Categories display in an unordered list, with subcategory menus popping out from their parent elements when moused over. 

You can adjust the number of popout levels for subcategories (between 1 and 3) in the Dropdown Levels field.

If you're using a responsive template, your navigation menus will be set to this menu type automatically. This display mode is also touch-responsive for tablets and smartphones.

Custom

This menu type is recommended only for advanced users. This option overrides all navigation menu settings and instead provides a text box to enter their own, custom HTML to style and define the navigation menu elements. By default, the text box will display some basic HTML. Note that if the Custom setting is selected, some form of HTML must be entered into the text box provided. Without any HTML settings configured within this text box, your storefront will produce errors.

Tips and Special Settings

Note on Using Navigation Menu Settings

The variety of Navigation Menu settings available will depend on the Menu Type that is chosen – not all settings will be available for all menu types. Refer to Basic Menu Settings above for further information.

Enabling Additional Navigation Menus

Volusion supports up to 8 levels of navigation menus within each template. By default, only menu levels 1-2 will be enabled. To enable and modify additional navigation menus within your store, an extra HTML tag must be added to the store template. Once this is done, additional menu levels will be configurable within the Navigation Menu page.

To enable additional navigation menus:

  1. Go to Design > File Editor in your Admin Area.
  2. Under Shortcuts, click template_x.html, where "X" is the number of the active template within your store.  The code displayed here is the HTML code for the template.
  3. Search the HTML code for the following text: "display_menu_1". There is a block of HTML code surrounding this text that creates each individual navigation menu level.
  4. Navigation menus 1 and 2 will already be created. Next, copy and paste the block of code that generates each navigational menu to create additional levels.
  5. Copy the HTML from the template file, similar to that shown above, and paste it below the last line of code corresponding to the last navigation level in the store template.
  6. Change the menu number in the text, (for example, "display_menu_1" to "display_menu_3") to reflect the navigation menu being configured.
  7. Click Save to update the template file.

For more information, see our article on adding extra navigation menus.

Uploading Images for BG Image Menu Types

As mentioned earlier, if you plan to use a Menu Type that uses images, you may have to upload your own images. Note that these particular Menu Types should only be used if you are an advanced user, understand HTML, and know how to connect to your store via FTP.

Once a Menu Type containing image options is set, broken image links contained within the navigation portion of your storefront may appear. Right-click on the broken image and view its properties to determine the image name and location within your store directories.

You can create your own custom images, rename them to match the names of the images being used on your storefront, and connect to your store via FTP to upload the images to the appropriate directory for the store template.

Once this is done, these custom images will appear within your store's navigation menus as configured within the Navigation Menu page.

Homepage-specific Nav Menus and Content

In some templates, navigation menus do not display on the homepage. You can configure your navigation menus to display or not display on your store homepage by editing some template code DIV ID tags. Be sure to archive your template before making any edits to your template code (DIV ID tags or otherwise).

If specific HTML is to be executed only on the site's home page, then you can encapsulate the HTML code with a DIV tag using an ID of "if_homepage". For code that should NOT be used on the home page (such as navigation menus), but should render everywhere else on the site, you will use the ID of if_not_homepage.  Note that you must ensure that the DIV ID of "content_area" is not inside either of the "if_homepage" or "if_not_homepage" tags, or you will experience 500 errors on multiple pages of your site (one-page-checkout.asp, accountsettings.asp, etc.).

Additional Settings

Note that within the Navigation Menu page, navigation settings can be configured for each template loaded into your store. The settings for each template are independent of each other. Change the Navigation Menu settings configured for each template with the View Menus For Template menu near the top right of the page. Select any of the templates loaded into the store to configure menu settings for that template.

Note that when settings are changed within any of the menu levels within the Navigation Menu page, you must click Save at the bottom of the page.

If Enable Immediate Publish in Config Variables is deselected, there will be three options in the radio button menu above the Save button:

  • Do Nothing
  • Preview this Design After Saving
  • Publish this Design After Saving

The first option will save the settings within the Navigation Menu page as-is but will not affect the actual storefront.

Choosing Preview this Design After Saving will save the menu changes and show a preview of the storefront in a new window, but will not publish the changes.

The last option will immediately update the storefront with the changes made on this page.

Summary

The Navigation Menu allows quick access to change the look and feel of the navigation elements within your storefront. Being able to do this can be vital, as the navigation menus form the basis of how visitors to your store interact with the storefront, find products, and place orders.

Note that some of the settings within this page are designed for advanced users. Some knowledge of HTML is required for using some of these advanced features. However, the Navigation Menu can scale in usability from basic to advanced users.

Watch the Design video series