Creating a unique custom menu at each breakpoint

Before you get started.

In this example, we’ll create a custom menu for each breakpoint, ideal for the layout and space available. To follow along, open up the template in the editor.

Part 1: Setting up the menu on desktop

1. From the Add panel, drag a horizontal menu into the header and attach it

2. Select Menu Layout from the floating action bar, align the text and menu items to the left

3. In the Inspector panel, under Design, adjust text font and size to 17

4. Move drag handles of the menu to resize it

5. In the Inspector panel, under Layouts, change sizing to Fixed

6. In docking, change menu to pixels

7. From the floating action bar, select add Manage Menu then select Add new item then select Site Pages

8. Select relevant items to become submenu items then select Apply

9. Create submenu items by moving items slightly to the right underneath menu item

10. Right click on the three dots in the floating bar and select Duplicate

11. Check submenu design color matches site themes by opening to Design in the Inspector panel

12. Open Layers panel, rename duplicated menu as Tablet Menu then hide it so it doesn’t show

Part 2: Setting up a menu on tablet

1. In the Layers panel, show tablet menu and hide desktop menu

2. On the canvas, move the CTA button to right of the menu

3. Open the Inspector panel and change right docking position to 0

4. Select tablet menu and align it using the tool in Inspector panel to vertical center and horizontal center

5. Open Manage Menu, then Manage Site Menus from the dropdown, name it as Tablet Menu and select Add a New Menu

6. Add new items to the site pages: Product, Company, Careers and Knowledge, then remove Homepage

7. Select Layout from the floating action bar and center everything

8. in the Inspector panel, under Design change text to 16

9. Under Layout, change width to 385

Part 3: Setting up a menu on mobile

1. In the Layers panel,  select Don’t Display to hide tablet menu

2. From the Add panel, add a hamburger menu, attach to right, align to vertical and center

3. Select the Open Menu tab and assign a different menu to this one

4. Select Manage Menu, then Manage Site Menus, select Add New Menu and rename as Mobile Menu

5. Assign pages in correct order: Product, Company, Careers etc

6. Drag ‘Knowledge’ between ‘Company’ and ‘Careers’ to reorder

7. Assign submenu items beneath ‘Careers’ menu item

8. In the Inspector panel,  change vertical menu width to  100%

Result: Each breakpoint has a unique menu that fits its design: desktop has a dropdown menu, tablet has a reduced number of menu items displayed and mobile has a hamburger menu with a dropdown.