header-logo
Learn how to use Wix to build your site and business.
Design and manage your site using intuitive Wix features.
Manage subscriptions, plans and invoices.
Run your business and connect with members.
Learn to purchase, connect or transfer a domain to your site.
Get tools to grow your business and web presence.
Boost your visibility with SEO and marketing tools.
Get advanced features to help you work more efficiently.
Find solutions, learn about known issues or contact us.
placeholder-preview-image
Improve your skills with our courses and tutorials.
Get tips for web design, marketing and more.
Learn to increase organic site traffic from search engines.
Build a custom site using our full-stack platform.
Get matched with a specialist to help you reach your goals.
placeholder-preview-image

Studio Editor: Designing Dropdowns in a Menu

9 min
In this article
  • Adjusting the layout of dropdowns
  • Customizing the the design of dropdowns
  • (Horizontal menus) Designing dropdowns individually
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:

  1. Go to your editor.
  2. Click the menu bar / hamburger menu icon.
  3. (Hamburger menus) Click Edit Menu to open hamburger editing mode, and select the menu.
  4. Click the Layout icon .
  5. Select the Dropdown tab.
  6. Use the options to adjust the layout:
Note:
The available options depend on the menu type (navigation bar or hamburger), and the orientation (horizontal or vertical) you choose.
The dropdown tab of the menu layout panel. The cursor is clicking 'Space above sub-items'.

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:

  1. Go to your editor.
  2. Click the menu bar / hamburger menu icon.
  3. (Hamburger menus) Click Edit Menu to open hamburger editing mode, and select the menu.
  4. Click the Open Inspector icon  at the top right of the editor.
A screenshot of opening the Inspector panel in the Studio Editor.
  1. Select the element you want to design:
    • Dropdown container
    • Dropdown menu container
    • Dropdown items
    • Dropdown sub-items
  2. (Dropdown items / dropdown sub-items) Select the relevant state: RegularHover, or Current page
  3. 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.
The inspector is open. The cursor is clicking the underline option for dropdown items.

(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:

  1. Click the horizontal menu in your editor.
  2. Click Manage Menu.
  3. Hover over the relevant dropdown and click Edit.
  4. Choose how you want to design the dropdown: 
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.