Wix Editor: Changing the Layout of Your Site Menu
Updated: 6 days ago
There are three site menu options available on Wix sites - horizontal, vertical, and in-page menus. You can customize each menu type's layout (such as the alignment and spacing) to suit your site's look, pages, and theme.
As well as adjusting the menu, you can also customize the layout of the items and text. Some of the available options include spacing between items, text alignment, and dropdown menu direction.
Note:
There are different customization options depending on the menu you have selected.
Changing the layout of a horizontal menu
Horizontal menus are a fun, striking way to help users navigate your site. There are lots of styles available, and you can edit the layout of the menu and the dropdown menu separately.
To change the layout of a horizonal menu:
Click the menu in your editor.
Click the Layout icon
.
Click either the Menu or Dropdown menu tab and customize the options:
Menu layout options
How to display items that don't fit: Choose how to display items that don't fit in the menu:
Wrapped: A second line is added to display the menu items.
Scroll: Visitors can view the hidden menu items by scrolling.
Horizontal spacing between items: Use the slider to adjust the horizontal spacing between menu items.
Vertical spacing between items: Use the slider to adjust the vertical spacing between menu items.
Items fill the whole menu: Click the toggle to enable or disable this option:
Enabled: Menu is stretched to fit the entire menu.
Disabled: Items are not stretched, and are automatically aligned to the left, right, or center of the menu.
Align text: Align the text to the left, right, or center.
Display items from: Display items from left to right, or right to left.
Item Padding: Use the sliders to adjust the vertical and horizontal space each item takes up in the menu.
Dropdown menu layout options
How do dropdown menus open?: Select how the dropdown items appear:
Flyout: The dropdown items appear under the menu items.
Columns: Columns appear under the main menu, containing the dropdown items.
Spacing between menu & dropdown menu: Use the slider to adjust the distance between the menu and the dropdown menu.
Stretch to full width: Use the toggle to enable or disable this option:
Enabled: Dropdown menu stretches to full width of the page.
Disabled: Dropdown menu stays within the gridlines of the main menu.
Number of columns: Use the slider to adjust how many columns are in the dropdown.
Align columns: Choose to align columns to the left, right, center, or justified.
Spacing between columns: Use the slider to adjust the distance between columns.
Align dropdown menu: Align the dropdown menu to the left or center.
Align text: Align the dropdown text to the left, right, or center.
Padding: Use the sliders to adjust the horizontal and vertical space the dropdown menu fills.
Spacing between items: Use the slider to adjust the spacing between dropdown items.
Changing the layout of a vertical menu
Vertical menus are clean, sophisticated way to display pages and items on your site. You can customize the alignment of the menu items, as well as the direction that the dropdown menu items are displayed.
To customize the layout of a vertical menu:
Click the menu in your editor.
Click the Layout icon
.
Customize the layout:
How are menu items aligned?: Select the alignment of the menu items; left, center or right.
How do dropdown menus open?: Choose if the dropdown items open to the left or the right of the menu.
Changing the layout of an anchor menu
In-page menus are an eye-catching way to display sections and anchors you have added to your site. They float on the page, so they're always visible to your site visitors.
Using the layout, you can align the menu text to fit your site's feel and needs.
To change the layout of an anchor menu:
Click the menu in your editor.
Click the Layout icon
.
Select an alignment:
Left: Aligns the text to the left of the menu box.
Center: Aligns the text to the center of the menu box.
Right: Aligns the text to the right of the menu box.
FAQs
Click a question below to learn more.
I'm using a horizontal menu. Why can't I see the 'Menu' and 'Dropdown Menu' tabs in the Layout panel?
Only the newer version of the horizontal menu includes the menu and dropdown menu options. If you can't see these tabs in the Layout panel, you're probably using an older version of the horizontal menu.
To access these options, replace your current menu with a new horizontal menu from the Add Elements panel.
I'm using a horizontal menu. Can I customize the design of my dropdown menu items?
You can customize your menu background, text, borders and more.
This article is credited to the Wix team - https://support.wix.com/ and we thank them for that!
Comments