Edit menus
5 min
When configuring a menu in Spire, you have more granular control over the links that appear and the style of the menus associated with those links. Each top-level menu item is added separately to the menu and can be configured with a different menu style, rather than configuring the entire menu as whole based on the site's page tree.
The layout of the header out of the box is fixed, so you cannot add, delete, or move widgets within it. However, each widget in the header has additional controls which should allow for a number of configurations.
Add a menu
The Header - Main Navigation widget is a special widget only available in the header. Its configuration options are specific to the header. For other link menus on a site, you can use the Link List or Navigation List widgets.
- Go to the Spire CMS by adding "/contentadmin" to the end of your site URL or by selecting Content Editor (CMS) from the Dashboard within the Admin Console.
- Select the Header from the page tree.
- Click the pencil icon to enter edit mode.
- Select the edit icon on the Header - Main Navigation widget.
- Click Add to add a menu component to the navigation.
- Select a Link Type:
- Link is a single link to a page with no children. This page can either be within the Optimizely Configured Commerce site, or an external fully qualified URL.
- Mega Menu displays parent links and their children in columns and in a menu the full width of the Main Navigation widget. The number of columns in the menu is configurable - options are 2, 3, 4 and 6 columns.
- Cascading Menu displays top level categories in a single column, and children of those categories as flyout menus that expand to the right of the column. The maximum depth of the menu is configurable.
- Enter a Destination for the menu. Clicking the Destination field opens the list of pages and categories on the website. Select the desired page. If configuring a Link-type menu item, you can also select the URL field and enter a fully qualified URL to an external website. For example, you may want to link to external content or your company's corporate website using this menu type.
- Enter an Override Title if desired. If you would like to enter some navigation-friendly text as the label for your link, rather than using the page title, enter it in this field.
- Choose a Number of Columns or Max Depth for Mega Menu or Cascading menus respectively.
- If you would like to include a default link to the Quick Order page, check the Show Quick Order box. This link is not configurable and always leads to the Quick Order page. If you would like to link to the Quick Order page but display a different label in the site menu, you can configure the link separately and set an Override Title.
- Click Save.
Edit or manage a menu
After you have added navigation items to your Header Main Navigation widget, you can edit their order and configuration in the widget options.
- Click the edit icon on the Header - Main Navigation widget.
- To edit the individual menu items, click Edit next to the menu item you want to edit.
- Update the menu's configuration options. You can update any of the options for the menu here, including changing its destination or menu type.
- Reorder the items in the menu by using the drag handle to the left of the link label in the list. The order of the menu items will update real-time in the CMS stage area.
- Delete individual menu items by clicking the trash can icon in the list of menu items.
Configure other header options
Edit logo
- Go to the Spire CMS and select the Header from the page tree.
- Click the pencil icon to enter edit mode.
- Select the edit icon on the Basic Logo widget.
- If there is no existing logo, click Add to launch CKFinder and upload or select a logo image for the website.
- If there is an existing logo, click Change to upload or choose a new image from CKFinder.
- Click Delete to remove an existing file.
- Enable the Mobile Specific Image slider to upload a logo that only displays at mobile screen sizes.
Edit sign-in options
- Go to the Spire CMS and select the Header from the page tree.
- Click the pencil icon to enter edit mode.
- Select the edit icon on the Header Sign In widget.
- Select a display setting: Both, Show Label or Show Icon. The Both option shows both the Sign In logo and label, and the others show one or the other.
- Check the Include My Account box to include the My Account pages under the Sign In icon. This will display any children of the My Account page in a single-column menu under the Sign In icon or label.
Edit cart options
- Go to the Spire CMS and select the Header from the page tree.
- Click the pencil icon to enter edit mode.
- Select the edit icon on the Cart Link widget.
- Select a display setting: Both, Show Label or Show Icon. The Both option shows both the Cart logo and label, and the others show one or the other. The item count for the cart will always display.
- Select a Shopping Cart Icon from the drop-down menu. Options are a cart, bag, or truck icons. You can also select None in this menu to show no icon at all.