Studio Editor: Designing Menus
In the Studio Editor, you can customize the look and feel of the menu down to the smallest detail. Access the Inspector panel to design the menu for each individual state (e.g. hover, selected), adjusting settings like the fill color, text style, shadow and much more.In this article, learn how to design each menu type:
Horizontal menus Vertical menus Anchor menus Hamburger menusUsing hover interactions?When adding a hover interaction to a menu, it doesn't appear on tablets and mobile devices. You can add a click interaction instead, if you want it to display on all breakpoints. Designing horizontal menusFrom the Inspector panel, you can design horizontal menus for 3 different states – Regular, Hover and Clicked – so visitors get a more interactive navigation experience. Depending on the chosen preset, use the available options to make the menu match the site's look and feel. For example, some horizontal menus include buttons or separators which you can customize.To design a horizontal menu:
Select the horizontal menu. Click the Open Inspector arrow  at the top right of the Editor. Scroll down to Design. Select the element you want to design from the drop-down:
    
Menu container Menu items Submenu container Submenu items   (Menu / submenu items) Select the relevant state: Regular, Hover or Current page.  Design the menu using the available options:
    
Background fills: Change the background color of the menu / submenu, and adjust the opacity to your liking. If your design includes separators, you can color them from here. Borders: Adjust the width and color of the menu's borders.  Corners: Make the corners of the menu / submenu more round or rectangular by adjusting the radius. Shadows: Add shadow to the menu and customize its angle, color, distance and more.  Text: Adjust the style and formatting of the menu and submenu items. Layout: Adjust the padding around the menu items.   Tip:Make your client's site look sleek on smaller screens by replacing the horizontal menu with a hamburger menu. From the Layers panel, you can hide the horizontal menu on the small breakpoint(s), and the hamburger menu on the large breakpoint(s). Designing vertical menusYou can design vertical menus for two different states – Regular and Selected – so visitors always know which page they're on. Change the fill color of the menu, submenu and arrow (when applicable) and customize other areas like the text, border, shadow, etc.Note:The available settings depend on the specific menu you've selected from the Add Elements panel.To design a vertical menu:
Select the vertical menu. Click the Open Inspector arrow  at the top right of the Editor. Scroll down to Design. Design the menu using the available options:
    
Fill Color & Opacity: Change the background color of the menu / submenu, and adjust the opacity to your liking. If your design includes an arrow, you can color it from here. Border: Select a style for the menu's border and adjust its width and color.  Shadow: Add shadow to the menu and customize its angle, color, distance and more.  Text: Adjust the style and formatting of the menu and submenu items. Spacing: Adjust the vertical spacing between the menu items, as well as the text and submenu offset (in px).  Tip:You can pin the vertical menu to the page so it stays floating as visitors scroll up and down. Designing anchor menusChoose what to show on the anchor menu by selecting a preset in the Inspector panel. You can display text, buttons, or a preset that combines the two. One preset even lets you show the anchor's name when visitors scroll to that specific area. You can then customize the design for two separate states – Regular and Clicked – so visitors get a clear indication of the anchor they're currently viewing.To design an anchor menu:
Select the anchor menu. Click the Open Inspector arrow  at the top right of the Editor. Scroll down to Design. Select a preset at the top. Select the relevant state: Regular or Clicked.  Design the menu using the available options:
    
Fill Color & Opacity: Change the background color of the menu / submenu, and adjust the opacity to your liking. If your design includes an arrow, you can color it from here. Text: Adjust the style and formatting of the menu and submenu items. Spacing: Adjust the vertical spacing between the menu items, as well as the text and submenu offset (in px).  Designing hamburger menusHamburger menus include several elements that you can design to your needs – the menu itself, its container and the icons that open and close it.To design a hamburger menu:
Select the hamburger menu. Choose what area of the menu you want to design: Menu iconCustomize the button that visitors click in order to open the hamburger menu. 
Choose a different icon: Click Change Vector Art to access the Media Manager.
Tip: Discover thousands of free icons in the Media by Wix tab in the Media Manager. Adjust the color, opacity and shadow: Open the Inspector panel.Menu container
Select the hamburger menu icon. Click Open Menu. Choose how to customize the menu container:
    
Change the container's background and overlay colors in the Inspector panel. Add more elements to the container (e.g. your client's logo, social media links, etc.)  Tip: Double-click anywhere in the Editor to exit the menu container and go back to the canvas. The actual menuThe actual menu element is a vertical menu, which means you can design the items for two different states – Regular and Selected. 
Select the hamburger menu icon. Click Open Menu. Select the vertical menu that appears. Click the Open Inspector arrow  at the top right of the Editor. Scroll down to Design.Tip: Double-click anywhere in the Editor to exit the menu container and go back to the canvas.The "Close Menu" buttonCustomize the icon that visitors click in order to close the menu. By default, the "X" icon appears at the top right of the container but you can move it around as you wish. 
Select the hamburger menu icon. Click Open Menu. Click the "Close Menu" button.  Choose what to do next:
    
Choose a different icon: Click Change Basic Shape to access the Media Manager. Tip: Discover thousands of free icons in the Media by Wix tab in the Media Manager. Adjust the color, border and shadow: Open the Inspector panel.  Tip: Double-click anywhere in the Editor to exit the menu container and go back to the canvas.