How to Set a Dropdown Navigation Menu
About the Navigation App
In this article, you will learn about the new Navigation app. It has several improvements from the old nav app, including the capability to add, as its name implies, a dropdown navigation menu of options to each of your top (parent’s) link.
Differences With the Old One
The old navigation app used to select one style per item, and you could have several styles (like link colors) on the same app.
This is obviously something uncommon and not expected on a navigation menu.
With the new Navigation app, all the item’s style get updated at the same time.
Also, with the old app you could leave some words out of the actual link. Now it is managed all from a CMS panel that will prevent this error.
Let’s get started on how to use it.
How to Set Up the Multi-level Navigation App
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, labeled “Edit Content”.
This will open the CMS panel.
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.
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. Notice it doesn’t include the word “Navigation”.
You must select a “Parent Link”. The item you are creating will be shown on the sub-level navigation of the link you selected.
You have two places to edit the order of the links of 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 further right. See the image below for reference.
Once you click this dot, the “edit in place toolbar” will open, with formatting options for your text.
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 fist) 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.
Can I still use the old navigation app?
If you are currently using it (existing user) you will still be able to use the old nav app. New sites are not getting the old version though.
We recommend using the new version, it’s better in several ways.
Why does the color of the top items change the sub items?
This is the normal/expected behavior. If you want to only edit only the color of the dropdown items, click on the style dot of the first sub-menu. Refer to the steps above (Style of Dropdown Items).