Wix Editor: Customizing Your Mobile Menu
Customize your mobile menu to perfectly suit your site's design and layout. Your mobile menu consists of three elements; the menu icon, the menu container, and the menu items. You can customize and adjust each of these individually to create a unique, eye-catching menu for you and your visitors on mobile.In this article, learn more about: 
Customizing the menu icon Adjusting the design of the menu container Customizing the menu items Important:This article refers to the mobile menu that was released at the beginning of 2019. You can update to the new one in just a few clicks. Learn how to update the mobile menuCustomizing the menu iconThe menu icon has two states; open and closed. You can select a preset icon, and customize both states to look however you'd like. To customize the menu icon:
Click the menu icon in your mobile editor. Click the Design icon . Select a preset from the options available. Click Customize Design. Select which state you'd like to customize the icon for by clicking a tab (Closed or Open). Choose how you want to design the icon:Customize the fill color and opacityYou can choose an eye-catching color for your icon, and set its visibility.Click the Fill Color and Opacity tab  and customize it with the options: 
Button Background: Click the color box to select a color for the button background, and  drag the slider to increase or decrese the opacity. Icon: Click the color box to select a color for the button icon, and drag the slider to increase or decrease the opacity.Add and customize a border around the iconAdd a border to your icon to make it stand out on your mobile site. Click the Border  tab to set the color, visibility and width:
Opacity and Color: Click the color box to select a color, and drag the slider to increase or decrease the opacity. Width: Drag the slider to increase or decrease the width of the border.Customize the icon's cornersClick the Corners tab  to make the icon corners rounder, or more square: 
Lock / Unlock: Click the icon  to enable or disable the corners having the same radius. Radius: Enter the radius of the corners into the field.Add and adjust a shadow for the iconAdd a shadow to give your icon a cool 3D effect. Click the Shadow tab  to add and adjust a shadow with the below options:
Enable Shadow: Click the toggle to enable or disable a shadow. Angle: Enter the angle into the text box. Distance: Drag the slider to increase or decrease the distance between the icon and the shadow. Size: Use the slider to adjust the size of the shadow. Blur: Drag the slider to adjust the shadow's blur. Opacity and Color: Click the color box to select a color for the shadow box, and drag the slider to increase or decrease the opacity.Customizing the menu containerThe menu box contains your menu items. Using the layout, design, and background panels, you can adjust the position and look of your menu container to suit your site. To customize the menu box:
Click the menu icon in your mobile editor. Click Edit Menu. Click the menu container. Choose how you want to adjust the menu container with the options below:Adjust the container's layoutChoose the layout of the container to match your site's alignment, and keep your menu sleek.Click the Layout icon  and select an alignment for your menu:
Full Screen: The menu container opens to full screen. Left: The menu container is opened to the left of the screen. Right: The menu container is opened to the right of the screen.Change the container backgroundSelect either a beautiful color or gradient for your container background, or a stunning image.  Click Change Background, and choose from one of the following options:
Color or Gradient: Click Color to select a color to match your site's theme, or stand out, or set up a sophisticated, beautiful gradient. Image: Choose an image from the media manager. You can use free images available from Wix, or upload your own.Customize the container's designAdjust the overlay that displays over the rest of your site when the menu is open. Click the Design icon , and use the settings to customize the overlay:
Color: Click the color box to select a color for the overlay. Opacity: Drag the slider to increase or decrease the opacity of the overlay.Note: This option is only available if you set the container's alignment to the left or right of the screen from the Layout panel.Menu items misplaced?You may be experiencing one of our known issues, which we're working hard to resolve. Learn more about this issue and see workaroundsCustomizing the menu itemsAdjust the look and design of your menu items (the menu text). You can customize settings such as the font, color, and spacing. To adjust the menu items:
Click the menu icon in your mobile editor. Click Edit Menu. Click the mobile menu. Choose how you want to adjust the menu items with the options below:Menu items layoutAdjust the layout of the items to further customize the menu, and suit your site's alignment.Click the Layout icon  and use the below options:
How's text aligned?: Select whether text is aligned to the left, right, or center of the menu container. How's the submenu arrow aligned?: Select whether the submenu arrow is aligned to the left or right of the item text.Menu items designThere are a range of design options available for your menu items. You can customize how the items look in two states; regular, and selected.Click the Design  icon, and select either the Regular or Selected tab to customize the states:
Regular:

Fill Color and Opacity : Click the color boxes to select a color, and drag the sliders to increase or decrease the opacity for the menu and submenu background, and the submenu arrow background. Border : 
        
Opacity and Color: Click the color box to select a color for your border, and drag the slider to increase or decrease the opacity. Border Style: Select whether to have the border displayed on all sides, the bottom only, or not at all.   Shadow :

Enable Shadow: Click the toggle to enable or disable a shadow. Angle: Enter the angle into the text box. Distance: Drag the slider to increase or decrease the distance between the menu and the shadow. Size: Use the slider to adjust the size of the shadow. Blur: Drag the slider to adjust the shadow's blur. Opacity and Color: Click the color box to select a color for the shadow box, and drag the slider to increase or decrease the opacity.   Text : Use the below options to customize both the menu, and the submenu items:
        
Theme: Choose a text theme from the dropdown menu. Font: Select a font for your menu items from the dropdown menu. Font size: Drag the slider to increase or decrease the size of the font. Formatting: Add a bold or italic effect to your text. Color: Click the color box to select a color for your text.   Spacing : Drag the sliders to increase or decrease the offset of the menu and submenu items.  
Selected:

Fill Color and Opacity : Click the color boxes to select a color, and drag the slider to increase or decrease the opacity of the menu and submenu background. Text : Click the color boxes to select a color for the menu and submenu items.  Want to adjust your menu further?You can customize the color of the drop-down arrow on your mobile menu. Learn how to customize the arrowNotes:If you want to add or remove elements from your menu, right-click the element and click Move To to move it between the menu box, header and footer.If you can't see your subpages in your mobile menu, click here.