Support Center

Advanced Management of Navigation Menus

Last Updated: Jan 19, 2016 05:21AM EST

Management of Navigation Menus

Each design has one main navigation and up to three secondary navigations. The main navigation features sub-menu items, a number of layout, color and animation settings and is positioned either above or to the left of the main content area. The secondary navigations are usually positioned on top right and at the bottom and have no additional settings. Some designs feature per-page secondary navigation as well.

Main Navigation Settings
The main navigation area has a number of different position, type and sub-menu appearance settings. To change the navigation area settings rollover your main navigation and click on an empty space within the blue rectangle. On the right a new panel will open with the Navigation Properties. From there you can change the Menu Alignment, Sub-Menu Appearance and Sub-Menu Animation.

The changes that you make will directly reflect on your page. To save the changes, simply click anywhere outside of the navigation area. To cancel the changes, press the ESC key on your keyboard.

Here is how the settings will affect the appearance of your navigation area:
  • Menu Alignment: different alignment (left, right and center) options are available only with the horizontal main navigations.
  • Sub-Menu Appearance: if your main menu is positioned on top, the sub-menu items may appear horizontally aligned below the main menu items, or in a vertical drop-down. If the main menu is positioned on the left, the sub-menu may only appear vertically, either below its main menu item or to the right of it.
  • Sub-Menu Animation: this is the animation effect used to display the sub-menu items. The available options are: slide down, fade in, no animation.

Navigation areas may not be deleted, but you can always delete all menu items inside them.

Per-page Navigation Area
Per-page navigation is available with some designs only. It is located either to the left or right of the content area or above it. This navigation type allows to display different navigations on different pages from the site. Per-page navigation might be appropriate, for example, when the website has multiple product pages and you need a quick reference to all other products from each product page.

To add a per-page navigation rollover the per-page empty navigation area and click the cogwheel icon on its top left. From the Navigation Properties window select [New Preset] and type a name for the navigation. Click Update.

In some designs, the Left Navigation Column must be enabled from Page Options to use the per-page navigation. 

After you add the per-page navigation you may start adding navigation items to it by rolling it over and clicking the plus icon displayed on top right.
To display an already added per-navigation area on another page, go to the per-page navigation area of that page and click the cogwheel icon on its top right. Choose the desired navigation from the dropdown and Update.

To rename an already added per-page navigation select it from the dropdown an click Rename.

To delete a per-page navigation or hide it from viewers select the respective action from the options available on roll over of the navigation cogwheel icon.

Read next: Add Navigation Items tutorial >>

Liquid error: undefined method `gsub' for nil:NilClass
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found