Studio Editor: Designing Dropdowns in a Menu
7 min read
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.
In this article, learn more about:
Adjusting the layout of dropdowns
Depending on your menu type (navigation bar, hamburger, etc.), you can use the Layout panel to set the dropdown's display or width. You can also tailor the spacing and alignment to fit the look of the main menu.
To adjust the layout of dropdowns:
- Go to your editor.
- Click the menu / menu button.
- (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: Select whether dropdown menu items are collapsed, or are always displayed.
- Space above container: Make the gap between the dropdown and main menu bigger or smaller.
- 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.
- Alignment: Align the dropdown items and sub-items to the left, right, or center of the container.
- Container width Choose the width of the dropdown container and adjust it how you want:
Note:
Options displayed 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 containers to the items and sub-items.
To customize the design of dropdowns:
- Go to your editor.
- Click the menu / menu button.
- (Hamburger menus) Click Edit Menu to open hamburger editing mode, and select the menu.
- Click the Open Inspector arrow
at the top right of the editor. - Scroll down to Design.
- 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.
Designing dropdowns individually
Changes you make to the design and layout of a dropdown apply to all dropdowns in a menu. However, you can "detach" dropdowns in a horizontal navigation bar menus to customize them separately.
Note:
This option is not available on hamburger menus or vertical navigation bar menus.
To detach and customize individual dropdowns:
- 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 layout of the dropdown menu
Customize the design of the container
Customize the design of the menu
Note:
The Edit this dropdown only toggles in the Inspector the Layout panel are connected, which means disabling / enabling one toggle automatically disables / enables the other.
Did this help?
|