Wix Editor: Customizing Your Mobile Menu
Updated: 6 days ago
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.
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 menu
Customizing the menu icon
The 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 opacity
You 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 decrease 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 icon
Add 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 corners
Click 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 icon
Add 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 container
The 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 layout
Choose 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 background
Select 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 design
Adjust 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 workarounds
Customizing the menu items
Adjust the look and design of your menu items (the menu text). You can customize settings such as the font, color, and spacing.
Notes:
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.
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 layout
Adjust 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:
Dropdown arrow position: Select whether the submenu arrow is aligned to the left or right of the item text. Learn how to customize the arrow
Formatting:
Direction: Select whether the item text reads left to right, or right to left.
Alignment: Select whether text is aligned to the left, right, or center of the menu container.
Advanced: Set the direction and alignment of submenu items.
Menu items design
There 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 make your site more accessible?
Click Settings, then add an Accessible name in the field provided. Accessible names are short titles (usually 1-3 words) that describe an element's function and content. These names are 'read' by screen readers and other assistive technologies, making them an important part of site accessibility.
This article is credited to the Wix team - https://support.wix.com/ and we thank them for that!
Comments