Help Center
    Help Center
  1. Creating your site
  2. Using Editor X
  3. Structuring a site in Editor X
    4. Editor X: Using Styled Horizontal Menus

Editor X: Using Styled Horizontal Menus

5 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
Styled Horizontal Menu is an advanced navigation element offered by Editor X, with tons of unique customization options. You can tailor this menu to your exact needs, adjusting the layout and design of every single area. 
Example of a Styled Horizontal Menu on an Editor X site
In this article, learn how to:

Adding a Styled Horizontal Menu

Choose a Styled Horizontal Menu that matches your desired look. You can personalize the design to make it more accurate to your needs, and choose which menu to show on this element – it can be an existing menu displayed elsewhere on your site, or a custom one just for this context. 

To add a Styled Horizontal Menu:

  1. Click Add  at the top of Editor X.
  2. Click Menu & Search.
  3. Click Styled Horizontal Menus.
  4. Drag and drop the relevant menu to the desired location on your page. 
  5. (Optional) Create a new menu with custom pages:
    1. Click Manage Menu. 
    2. Click the drop-down under Which menu is displayed?.
    3. Click Manage Site Menus.
    4. Click + Add New Menu at the bottom to create the custom menu. 
Adding a Styled Horizontal menu from the Add panel in Editor X

Designing a Styled Horizontal Menu

From the Inspector panel, you can design every part of your Styled Horizontal Menu - the menu and submenu container, as well as the menu and submenu items. 

To design the menu:

  1. Click your Styled Horizontal Menu.
  2. Click the Inspector icon  at the top of Editor X.
  3. Click the Design tab . 
  4. Select an option under What do you want to design?:
    • Menu container
    • Menu items
    • Submenu container
    • Submenu items
  5. Use the available options to design your menu. You can:
    • Add layers of background fills and adjust the opacity of each layer.
    • Format and style the text.
    • Add borders to make that area of your menu stand out. 
    • Round the corners of your menu / submenu.
    • Add shadow to accentuate the menu or its items.
    • Adjust the padding around the menu or its items. 
Tip:
You can design the menu and submenu items for different states - Regular, Hover or Current page (i.e. when the visitor is on a page they see in the menu or submenu).
Designing the Styled Horizontal menu and submenu on Editor X

Adjusting the layout of a Styled Horizontal Menu

Adjust the layout of your menu and submenu so they look exactly as you want. You can choose how to display menu items that don't fit (Wrap or Scroll) and the way your submenu opens (Flyout or Columns). You can also control the spacing, padding and much more.

To adjust the menu's layout:


  1. Click your Styled Horizontal Menu.
  2. Click the Layout icon .
  3. Choose which area you want to work on: Menu or Submenu.
  4. Adjust the layout of the menu and submenu to your needs. Click below to learn more about the available options:
Adjusting the layout of the Styled Horizontal menu and submenu on Editor X

Did this help?

|
In this article
  • Adding a Styled Horizontal Menu
  • Designing a Styled Horizontal Menu
  • Adjusting the layout of a Styled Horizontal Menu

Related content

Editor X: Adding Menus to Your Site
Editor X: Designing Menus
Editor X: Working With Menus Across Breakpoints

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched