Studio Editor: Designing Dropdowns in a Menu
After adding and setting up a dropdown, you can tailor its design to look how you want. Change the look and alignment of both the container and menu to create a custom look for clients, and reinforce their brand.
Before you begin:
Dropdowns can only be added from new menus in the Studio Editor. If you have the previous menu experience, you can create submenus and add mega menus.
Adjusting the layout of dropdowns
Depending on your menu type (navigation bar, hamburger, etc.), different settings are displayed in the Layout panel. You can also tailor the spacing and alignment to fit the look of the main menu.
To adjust the layout of dropdowns:
Click the menu bar / hamburger menu icon.
(Hamburger menus) Click Edit Menu to open hamburger editing mode, and select the menu.
Click the Layout icon
.
Select the Dropdown tab.
Use the options to adjust the layout:
Container width
Choose the width of the dropdown container and adjust it how you want:
Stretch: The dropdown container is the full width of the screen. You can adjust its width by setting the margins (in px).
Fit to menu: The dropdown is the same width as the main parent menu.
Hug content: The container "hugs" the dropdown items. You can choose whether to align it to the left, center, or right of the main menu.
Item display and number of columns
Item display: Select whether dropdown menu items are collapsed, or are always displayed.
Number of columns: Choose how many columns are displayed in the dropdown menu.
Spacing
Space above container: Make the gap between the dropdown and main menu bigger or smaller.
Spacing: Adjust the spacing of items in the dropdown menu. If you have added sub-items, you can also change the spacing between and above them.
Space between items: Enter the horizontal and vertical spacing between dropdown items.
Space between sub-items: Make the space between sub-items smaller or bigger.
Space above sub-items: Choose the spacing above sub-items in the menu.
Padding, direction, and alignment
Padding: Tailor the space around each part of of the dropdown to meet your needs:
Item padding: Make the space around dropdown menu items smaller or bigger.
Sub-item padding: Adjust the space around sub-items in the dropdown menu.
Container padding: Make the space around the dropdown container as small or as big as you need.
Direction: Choose whether items read left to right, or right to left.
Alignment: Align the dropdown items and sub-items to the left, right, or center of the container.
Note:
The available options depend on the menu type (navigation bar or hamburger), and the orientation (horizontal or vertical) you choose.
Customizing the the design of dropdowns
You can design each part of a dropdown to complement the main menu's look and feel - from the container to the items and sub-items. Choose the background fill and text to reinforce your clients' branding, and add borders to make dropdowns stand out on the page.
You can also customize the design of items and sub-items for separate states (e.g. hover, current page).
To customize the design of dropdowns:
Click the menu bar / hamburger menu icon.
(Hamburger menus) Click Edit Menu to open hamburger editing mode, and select the menu.
Click the Open Inspector icon
at the top right of the editor.
Select the element you want to design:
Dropdown container
Dropdown menu container
Dropdown items
Dropdown sub-items
(Dropdown items / dropdown sub-items) Select the relevant state: Regular, Hover, or Current page.
Design the dropdown using the available options:
Background fills: Change the background color of of the dropdown, or add an eye-catching gradient. You can adjust the opacity, and add multiple layers to suit your design needs.
Borders: Adjust the width and color of the dropdown container's borders.
Corners: Make the corners of the dropdown more round or rectangular by adjusting the radius.
Text: Adjust the style and formatting of the dropdown items and sub-items.
Shadow: Add shadows to the dropdown, and customize its angle, color, distance and more.
What's the difference between containers?
Dropdown container: This displays all of the elements and menus you have added to the dropdown item.
Dropdown menu container: This displays dropdown menu items only. It's nested within the dropdown container.
(Horizontal menus) Designing dropdowns individually
The changes you make to a dropdown are applied to all dropdowns in that menu. Want to create something more unique? You can 'detach' dropdowns you've added to horizontal navigation menus for full design control.
Note:
This option is not available on hamburger menus or vertical navigation bar menus.
To detach and customize individual dropdowns in horizontal menus:
Click the horizontal menu in your editor.
Click Manage Menu.
Hover over the relevant dropdown and click Edit.
Choose how you want to design the dropdown:
Adjust the layout of the container
Adjust the width of the container that displays the items and elements you've added to the dropdown. You can also set the space between the container and the main menu.
Select the dropdown container.
Click the Layout icon
.
Click the Edit this dropdown only toggle to enable it.
Make the changes you want:
Container width: Select an option from the list and adjust it how you want:
Stretch: The dropdown container is the full width of the screen. You can decrease its width by setting the margins (in px).
Fit to menu: The dropdown container is the same width as its parent menu.
Hug content: The container "hugs" the dropdown items. You can choose whether to align it to the left, center, or right of the main menu.
Custom: Set the width of the container by moving the drag handles on each side. You can choose whether to align it to the left, center, or right of the main menu.
Space above container: Make the gap between the dropdown container and main menu bigger or smaller.
Adjust the layout of the dropdown menu
This is the menu that displays items you've added to the dropdown. You can set how many columns are displayed, adjust the spacing between and around the menu, and choose the direction and alignment.
Select the dropdown menu in the container.
Click the Layout icon
.
Click the Edit this dropdown only toggle to enable it.
Make the changes you want:
Number of columns: Choose how many columns are displayed in the dropdown menu.
Spacing: Adjust the spacing of items in the dropdown menu. If you have added sub-items, you can also change the spacing between and above them.
Space between items: Enter the horizontal and vertical spacing between dropdown items.
Space between sub-items: Make the space between sub-items smaller or bigger.
Space above sub-items: Choose the spacing above sub-items in the menu.
Padding: Tailor the space around each part of of the dropdown to meet your needs:
Item padding: Make the space around dropdown menu items smaller or bigger.
Sub-item padding: Adjust the space around sub-items in the dropdown menu.
Container padding: Make the space around the dropdown container as small or as big as you need.
Direction: Change the direction of the item text (left-to-right, or right-to-left).
Alignment: Align the dropdown items and sub-items to the left, right, or center of the container.
Customize the design of the container
Customize the background fill and radius of the container that displays the items and elements you've added to the dropdown. You can also add and adjust borders and shadows to make it stand out against the page.
Select the dropdown container.
Click the Open Inspector icon
at the top right of the editor.
Scroll down to Design.
Click the Edit this dropdown only toggle to enable it.
Make the changes you want:
Background fills: Change the color of of the dropdown container, or add an eye-catching gradient. You can adjust the opacity, and add multiple layers to suit your design needs.
Borders: Adjust the width and color of the dropdown container's borders.
Corners: Make the corners of the dropdown container more round or rectangular by adjusting the radius.
Shadow: Add shadows to the dropdown container and customize its angle, color, distance and more.
Customize the design of the menu
Customize the menu that displays your dropdown items. You can adjust design the container, and adjust the items and sub-items for each state to create a truly custom look.
Select the dropdown menu in the container.
Click the Open Inspector icon
at the top right of the editor.
Scroll down to Design.
Click the Edit this dropdown only toggle to enable it.
Select the element you want to design:
Dropdown items
Dropdown menu container
Dropdown sub-items
(Dropdown items / dropdown sub-items) Select the relevant state: Regular, Hover, or Current page.
Make the changes you want:
Background fills: Change the background color, or add an eye-catching gradient. You can adjust the opacity, and add multiple layers to suit your design needs.
Text: Adjust the style and formatting of the dropdown menu items and sub-items.
Borders: Add and adjust borders around the menu container.
Corners: Make the corners of the menu container more round or rectangular by adjusting the radius.
Shadow: Add shadows to the menu container and customize its angle, color, distance and more.
Note:
The Edit this dropdown only toggles in the Inspector and the Layout panel are connected. When you disable / enable the toggle in one of these panels, it automatically disables / enables in the other panel.