ESP Websites Design Studio: Site Navigation

To edit an existing menu, select Site Navigation from the Design Studio dropdown.

What's Covered:

• Menu Item Options
• Properties

Menu Options

From the Site Navigation area you are able to make edits and add menu items to Menu's that have been previously set up. If you are interested in creating a new Navigation Menu, refer to our Advanced Design - Site Navigation Quick Step Guide.

Select a Menu

In most templates there is only one navigation menu set up called "Top" this menu pertains to the navigation bar at the top of your website.

If you have more than one menu on your site, you can use the Select a Menu dropdown to choose which menu you want to edit.

Menu

After selecting the menu you would like to edit, click on a menu item to edit its properties or add to it. Next, select a menu item.

In the example below, "More" is selected. The menu item will display in the Properties column.

• Note: "Home" and "Product Search" are static and cannot be edited.

Organizing Links

There is a note above the menu links in the Menu property box, "Click any item to edit Properties. Drag and drop any item to rearrange the order. .." Click here to see this in action!

Properties

The Properties column is where we can edit the display name (the name of the menu item that will be displayed on your site), the type of item, and the details.

Menu Item Properties

Previously we learned that the Properties column is where we can edit the display name (the name of the menu item that will be displayed on your site), the type of item, and the details.

There are several different types of items. The types available in the dropdown are:

• Event
• URL
• Pages
• MailTo
• Product Collections
• Select-A-Searches
• Text
• Top Searches

The Detail will be dependent on the type of item you select. For example, if you choose Product Collection, the detail will display a dropdown of all available product collections. Click here to view a demo.

Advanced Menu Options

The Advanced options will display options for opening the menu item, as well as the ability to enter CSS class information. If you are not well versed in CSS, it is recommended that you do not enter information in the CSS class field.

The navigation found below the Advanced options area of the Properties box, is the dropdown menu associated with its parent link. For example, when I chose "More" from the Menu, on my live site when I hover over More I will see News & Videos. Click here to take a look.

Add a New Menu Item

If you would like to add a new link to this submenu, in the lower section of the Properties area, click on the Add button.

A second Properties window will be displayed with the "Navigation Item Options"

Edit An Exsisting Menu Item

To edit a menu item thats already been created, simply click on it! A second Properties window will be displayed to the right with "Navigation Item Options"

You can edit the submenu item selected in the previous step the same way as the main menu item.

Edit the Navigation Item Options:

• Add a Display Name
• Select a type
• Select/Add Detail

Click on the Save button.

If you are satisfied with your site navigation, go to the Settings Toolbar and click on Publish.