Studio Editor: Designing Menus
6 min read
In the Studio Editor, you can customize the look and feel of the menu down to the smallest detail. Access the Inspector panel to design the menu for each individual state (e.g. hover, selected), adjusting settings like the fill color, text style, shadow and much more.
In this article, learn how to design each menu type:
Using hover interactions?
When adding a hover interaction to a menu, it doesn't appear on tablets and mobile devices. You can add a click interaction instead, if you want it to display on all breakpoints.
Designing horizontal menus
From the Inspector panel, you can design horizontal menus for 3 different states – Regular, Hover and Clicked – so visitors get a more interactive navigation experience.
Depending on the chosen preset, use the available options to make the menu match the site's look and feel. For example, some horizontal menus include buttons or separators which you can customize.
To design a horizontal menu:
- Select the horizontal menu.
- Click the Open Inspector arrow
at the top right of the Editor. - Scroll down to Design.
- Select the element you want to design from the drop-down:
- Menu container
- Menu items
- Submenu container
- Submenu items
- (Menu / submenu items) Select the relevant state: Regular, Hover or Current page.
- Design the menu using the available options:
- Background fills: Change the background color of the menu / submenu, and adjust the opacity to your liking. If your design includes separators, you can color them from here.
- Borders: Adjust the width and color of the menu's borders.
- Corners: Make the corners of the menu / submenu more round or rectangular by adjusting the radius.
- Shadows: Add shadow to the menu and customize its angle, color, distance and more.
- Text: Adjust the style and formatting of the menu and submenu items.
- Layout: Adjust the padding around the menu items.
Tip:
Make your client's site look sleek on smaller screens by replacing the horizontal menu with a hamburger menu. From the Layers panel, you can hide the horizontal menu on the small breakpoint(s), and the hamburger menu on the large breakpoint(s).
Designing vertical menus
You can design vertical menus for two different states – Regular and Selected – so visitors always know which page they're on. Change the fill color of the menu, submenu and arrow (when applicable) and customize other areas like the text, border, shadow, etc.
Note:
The available settings depend on the specific menu you've selected from the Add Elements panel.
To design a vertical menu:
- Select the vertical menu.
- Click the Open Inspector arrow at the top right of the Editor.
- Scroll down to Design.
- Design the menu using the available options:
- Fill Color & Opacity: Change the background color of the menu / submenu, and adjust the opacity to your liking. If your design includes an arrow, you can color it from here.
- Border: Select a style for the menu's border and adjust its width and color.
- Shadow: Add shadow to the menu and customize its angle, color, distance and more.
- Text: Adjust the style and formatting of the menu and submenu items.
- Spacing: Adjust the vertical spacing between the menu items, as well as the text and submenu offset (in px).
Tip:
You can pin the vertical menu to the page so it stays floating as visitors scroll up and down.
Designing anchor menus
Choose what to show on the anchor menu by selecting a preset in the Inspector panel. You can display text, buttons, or a preset that combines the two. One preset even lets you show the anchor's name when visitors scroll to that specific area.
You can then customize the design for two separate states – Regular and Clicked – so visitors get a clear indication of the anchor they're currently viewing.
To design an anchor menu:
- Select the anchor menu.
- Click the Open Inspector arrow at the top right of the Editor.
- Scroll down to Design.
- Select a preset at the top.
- Select the relevant state: Regular or Clicked.
- Design the menu using the available options:
- Fill Color & Opacity: Change the background color of the menu / submenu, and adjust the opacity to your liking. If your design includes an arrow, you can color it from here.
- Text: Adjust the style and formatting of the menu and submenu items.
- Spacing: Adjust the vertical spacing between the menu items, as well as the text and submenu offset (in px).
Designing hamburger menus
Hamburger menus include several elements that you can design to your needs – the menu itself, its container and the icons that open and close it.
To design a hamburger menu:
- Select the hamburger menu.
- Choose what area of the menu you want to design:
Menu icon
Menu container
The actual menu
The "Close Menu" button
Did this help?
|