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 Navigation. Choose from horizontal, vertical or hamburger styles. 

Creating custom menus.

To add another menu to your site, first drag in a new menu component from the Add panel, select it and click Manage Menu. Under Available Menus, you’ll see your main menu by default. Click Add & Edit Menus to set up your new one.

Managing custom menus.

Any new menu components you add to your site will have just one item by default: Home. Open the Manage Menu panel to choose which pages you want to display. From the 3 dots beside an item you can rename it and add links to pages, anchors, externals sites and more.

Clickable dropdown menus.

Turn any menu item into a subitem. Select the menu you want, open the Manage Menu panel, click the 3 dots beside an item, then choose Set as Subitem. 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

Adding 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

Creating a dropdown menu. Click the dropdown icon in the bottom right. Rename your Unclickable Item: Dropdown. Now drag the Contact item beneath it.

03

Creating a custom menu. Drag a horizontal menu component into the footer of your site. Select it, click Manage Menu and under Available Menus click Add & Edit. Now select + New Menu and rename it: Footer Menu.