Adding a Dropdown Navigation Menu

Install

Login to your site and click on "Apps" in the bottom Shelf and look for "Navigation". Click and drag the “Install New” button on the right side of the Navigation app category to your layout.

Once you release it, your app will load and will look like the following image.

Modify Default Items

Once you have it installed, the first thing you’ll want to do is add your own items. To do so, click on the pencil icon on the app toolbar, labelled “Edit Content”.

This will open the CMS panel (Content Management System).

Notice that highlighted tab on the left reads “Manage Top Level Links”. This refers to the top level of your links (the ones that are visible without hovering over). If you go to the “Manage Sub Level Links” tab, you will see the sub-menu items.

To edit an item, click on the “Edit” link of any of them. This will open a screen that will look like the following.

There you can edit the “Link Title”, which will be displayed as the actual text of the link (for example: Home). You can also set the destination URL to where you want your visitor to be taken when he clicks. This can either be one of your existing pages, or a custom URL.

You can also choose them to open on the same or new window of your visitor’s browser.

Add Items

To add a top level item, click on the “New Top Level Link” tab on the left. This will add a top link to your navigation menu. The window is the exact same of the “New Sub Level Link” item, but without the “Parent Link” option. We’ll talk about the second one below.

To add a sub-item, click on the “New Sub Level Link” tab on the left. You must select a “Parent Link”. The item you are creating will be shown on the sub-level navigation of the link you selected.

Reorder Items

You have two places to edit the order of the links for your dropdown navigation. This affects the display position of each item.

First, you have the “Manage Top Level Links” tab (the one at the top of the list of this CMS panel). The second one is the “Manage Sub Level Links” tab, which edits the items of the sub-menu. But both panels behave the same way.

They would look like the following image.

To change the position of an item, drag and drop it above or below any of current items. Release when you’re done positioning it, and click “Close” on the top right.

Style of Top Items

To change the style (color, typography, font size, etc.) of the top items, you must hover over the first item of your Navigation app, and select the style dot on the left. See the image below for reference.

The style dot may be a bit difficult to reach if you don’t hover the proper place (the actual first link item)

If you click on the color, you’ll get two different options. “Default Color”, for the “normal state” and “Rollover Color”, for hovering purposes.

You’ll notice that whenever you change any of these colors, the sub-menu items are also affected. It may be something desired, but if not, keep on reading to learn how to prevent it.

Style of Dropdown Items

If you want to edit the styling of the sub-menu items, hover over one (the first) item of the sub menu of the first top-level link and click on its dot.

Note that it must be the first the top (parent) link for the dot to appear on the submenu.

It will show the same edit-in-place toolbar, you’ll get the same options. But these will only affect the items of the dropdown.

For further questions or comments, please get in touch.