Round image of the author with a thin blue line around the image

Joshua Sotomayor

Customer Care - Editor X

,

July 20, 2022

Custom Menus at Each Breakpoint.

Follow Josh from our Customer Care team as he presents the steps for creating a unique custom menu at each breakpoint.

How to create 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.

How to create a unique custom menu at each breakpoint.
Before you get started.
Part 1: Setting up the menu on desktop
Part 2: Setting up a menu on tablet
Part 3: Setting up a menu on mobile
Round image of the author with a thin blue line around the image

Joshua Sotomayor

Customer Care - Editor X

My name is Josh and I’m on the Editor X Customer Care team. I’ve got a passion for helping other creatives realize their website ideas and dreams. Aside from enjoying getting creative with web design on Editor X, I love playing music, camping and paddleboarding, and exploring different restaurants around the world.

Did you find this lesson helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

See all results ▶