LESSON 11

Custom menus.

You can create and manage multiple menus on every site. For example, you might have a main site menu for page navigation, and a different menu that links to each section or page of a portfolio.

Adding menu components.

Find menu components in the Add panel, under Menu. Choose from horizontal, vertical or hamburger styles. 

Setting up your menu.

The first menu component you drag onto your site will have just one item by default: Home. Open the Manage Menu panel to set up your menu data. First, choose which pages you want it to display—then from the 3 dots beside an item you can rename it and add links to pages, anchors, external sites and more.

Adding multiple menus.

To add another menu to your site, first drag in a new menu component from the Add panel. Your new menu will automatically show all the data from your first menu. If you want your new menu to display different data, select it and click Manage Menu. From the dropdown under Choose a menu to display, you’ll see your first menu there already. Now click Manage All Menus, then Add New Menu. From here, you can rename your menu and set up its data. 
 

Note: To create new items and links, click the Link Items icon at the bottom of the panel, add your link, then name your new item.

Clickable dropdown menus.

You can turn any menu item into a subitem. Select the menu component you want, open the Manage Menu panel, click the 3 dots beside an item, then choose Move to Dropdown. This item will now be revealed when you click on its parent item in your menu.

Non-clickable

dropdown menus.

To create a dropdown menu that opens on hover, click the icon in the bottom right of the Manage Menu panel. Next, name your non-clickable dropdown heading and drag any subitems underneath it.

Style per breakpoint.

You can change the color or size of your menu component at each breakpoint. 

Note: Any style changes automatically cascade down to smaller breakpoints.

Menu components

per breakpoint.

If you want to show a different menu component at a different breakpoint, you’ll need to hide the existing component and add a new one. For example, you might want your main menu to be horizontal on desktop, but hamburger style on mobile. In this case, go to the mobile breakpoint, right click the horizontal menu component and select Don’t Display. Next, drag in a hamburger menu. The hamburger menu will have all the same data as the horizontal one, but if you want, you can customize it from the Manage Menu panel.

TRY IT YOURSELF

Exercise on custom menus.

​Open Academy X from desktop to complete this exercise.

01

Add a new menu item. Select the horizontal menu on your canvas and click Manage Menu. Add a new item and link to the web address: editorx.com. Rename your item: CONTACT.

02

Create a dropdown menu. Click the dropdown icon in the bottom right. Rename your unclickable Item: DROPDOWN. Now drag the CONTACT item beneath it.

03

Create a custom menu. Drag a horizontal menu component into the footer of your site. Select it and click Manage Menu. Next, under Choose a menu to display click Manage All Menus then Add New Menu.

Editor X

The rest is up to you.