How to add and design site menus in Wix Studio Two

4 days ago

3 min read

Updated: 2 days ago

In the Studio Two editor, drag a Horizontal, Vertical or Hamburger menu from the Menu & Search elements onto the page. Then use Manage Menu to set the items and Change Layout to set the structure. Style each state in the Design tab of the Inspector panel.

Screenshot of landing page showing landing page with horizontal menu. — Image: Wix Help Center, “Studio Two Editor: Adding and Managing Site Menus”

Before you start

You need a site open in the Studio Two editor, not the classic Studio editor.
Create the pages, links or CMS collections you want in the menu first, or add them from the menu panel later.
Decide which menu type fits the layout: horizontal, vertical or hamburger.

Step by step

Add a menu element. Hover over the Add Elements icon at the top left and select Elements. Click the Menu & Search icon, then drag a Horizontal menu, Vertical menu or Hamburger menu onto the page. These menus are connected to your site pages, so new pages show up in them automatically.
Open Manage Menu. Click the menu on the canvas, then click Manage Menu. This panel is where you control the items and which menu the element displays.
Add items. Click Add Item at the bottom and pick Site pages, Link or anchor, or Dropdown. For site pages, tick the checkbox next to each page and click Add to Menu. Links can point to external sites, documents, contact options, sections and popups.
Rename, relink, reorder or remove items. Hover over an item and click the More Actions icon to use Change link, Rename or Remove from menu. To reorder, hold the Reorder icon and drag the item to a new position. Removing an item only removes the link from the menu, not the page from the site.
Group items in a dropdown. Choose the item that will be the dropdown title. Drag another item below it, click More Actions and select Move under with the page name. Repeat for each item. You can also drag a page slightly to the right until it tucks under another page.
Change the menu layout. With the menu selected, click Change Layout on the action bar. Under Menu, choose Menu bar or Hamburger. For a menu bar, set the Orientation to Horizontal or Vertical.
Set item behavior for horizontal bars. For a horizontal menu bar, open the Item behavior drop-down. Fit to text expands the menu to fit the items. Fit to scroll adds a button so visitors can scroll through the extra items.
Design horizontal and vertical menus. Select the menu, click the Open Inspector icon at the top right and open the Design tab. Under Choose what to design, pick a part such as Menu bar, Menu items, Dropdowns or Scroll Button. Then pick Regular, Hover or Selected and adjust options such as Fill, Borders, Corners, Shadow and Spacing.
Design a hamburger menu. Select the hamburger menu and use the mode dropdown to switch between Regular mode and Hamburger menu. Regular mode styles the closed button or icon. Hamburger menu styles the opened container, the Close Button and the Icon.
Show different menus on different pages. In Manage Menu, open the drop-down under Which menu is displayed?. Select an existing menu, or click Manage Site Menus and then + Add New Menu and enter a name. Each menu can have its own items.

screenshot of wix studio two showing manage menu selected on the action bar, move under options highlighted — Image: Wix Help Center, “Studio Two Editor: Adding and Managing Site Menus”

wix studio two editor with change layout selected on the action bar — Image: Wix Help Center, “Studio Two Editor: Adding and Managing Site Menus”

Good to know

The design options you see depend on the menu preset you chose in the Add Elements panel.
Horizontal and vertical menus have Regular, Hover and Selected states. Available states for hamburger parts depend on the part, for example Disabled.
The Inspector also offers Position, Appearance, Cursor, Anchor and Custom CSS for more advanced control. Anchor is listed for horizontal and vertical menus, not for the hamburger button.
The name of a new menu is not visible to visitors.

parnii note

Set up the items and layout first, then style the states, because the design options depend on the preset and layout you picked. Try larger menu changes on a copy of the site before applying them to a live one.

FAQ

Do new pages appear in the menu automatically?

Yes. Horizontal, Vertical and Hamburger menus from the Menu category are connected to your site pages, so new pages appear on the menu automatically.

Does removing a page from a menu delete it?

No. Remove from menu only removes the link from that menu. The page stays in your site pages and you can add it back at any time.

How do I make a dropdown in a Studio Two menu?

Open Manage Menu, pick a parent item, and move other items under it with More Actions and Move under. You can also drag an item right until it tucks under the parent.