Editor X: Using Styled Horizontal Menus
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. In this article, learn how to:
Add a Styled Horizontal Menu Design the menu Adjust the layout of the menu and submenuAdding a Styled Horizontal MenuChoose 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:
Click Add  at the top of Editor X. Click Menu & Search. Click Styled Horizontal Menus. Drag and drop the relevant menu to the desired location on your page.  (Optional) Create a new menu with custom pages:
    
Click Manage Menu.  Click the drop-down under Which menu is displayed?. Click Manage Site Menus. Click + Add New Menu at the bottom to create the custom menu.   Designing a Styled Horizontal MenuFrom 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:
Click your Styled Horizontal Menu. Click the Inspector icon  at the top of Editor X. Click the Design tab .  Select an option under What do you want to design?:
    
Menu container Menu items Submenu container Submenu items   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).Adjusting the layout of a Styled Horizontal MenuAdjust 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:
Click your Styled Horizontal Menu. Click the Layout icon . Choose which area you want to work on: Menu or Submenu. Adjust the layout of the menu and submenu to your needs. Click below to learn more about the available options:Menu layout options
How to display items that don't fit: Choose how to display items that don't fit in the menu container:
    
Wrap: More rows are added to your menu in order to display all items. Scroll:  This option keeps your menu compact, featuring only one row of items. Visitors click the scroll button to see the rest of the menu.   Horizontal / Vertical spacing between items: Drag the sliders to adjust the spacing between menu items. Items fill the whole menu: Enable this toggle to make your items stretch to fill the entire space of the menu container. 
    
(When the toggle is enabled) Align text: Choose how to align the text on your menu items: Left, center or right. (When the toggle is disabled) Align items: Choose how to align the menu items: Left, center or right.    Display items from: Choose whether to show menu items from left to right, or right to left. Item Padding: Drag the sliders to adjust the vertical and horizontal space each item takes up in the menu.Submenu layout options
How do submenus open?: Select how the submenu items appear:
    
Flyout: Your submenu opens in a drop-down list. This is a good option if you only have a few items to display. Columns: Your submenu items are displayed in columns. If you have many items in your submenu, choose this option while defining the number of columns you need.  Depending on what you choose, there are different layout options to adjust:
Flyout:

Spacing between menu & submenu: Drag the slider to adjust the distance between the menu and the submenu. Align submenu: Align the submenu to the left or center. Align text: Align the submenu text to the left, right, or center. Padding: Drag the sliders to adjust the horizontal and vertical space the submenu fills. Spacing between items: Drag the slider to adjust the spacing between submenu items.
   Columns:

Spacing between menu & submenu: Drag the slider to adjust the distance between the menu and the submenu. Stretch submenu: Choose whether to make the submenu match the width of your menu, or stretch it to the full width of the page.  Number of columns: Drag the slider to adjust how many columns are in the submenu. Align columns: Choose to align columns to the left, right, center, or justified. Spacing between columns: Drag the slider to adjust the distance between columns. Align text: Align the submenu text to the left, right, or center. Padding: Drag the sliders to adjust the horizontal and vertical space the submenu fills. Spacing between items: Drag the slider to adjust the spacing between submenu items.