HTML5 Tips: Customize Your Navigation Menu | The Official Wix Blog

The navigation menu may not take a lot of space on your website, but it is definitely its most critical key component. Whether your visitors find your website user-friendly and easy to browse depends very much on how your navigation menu is set up. That’s why we recommend you take some time to think about your navigation menu when creating a HTML5 website.

Customizing your navigation menu with Wix’ HTML5 editor is easy. Simply follow these steps:

 

Basic Settings

In the editor, click on the menu and drag the borders to change its size.

Click on the menu and drag the borders to change its size

When highlighting the menu, the Settings box will also appear.

The Settings box will also appear

In the Settings box, you can perform the following:

Align buttons to left, right or center

Align button text to left, right or center

Choose to keep all buttons in same size

Choose to stretch the buttons to fill the entire space of the menu

Edit text for the “More” button (in case you have so many pages that not all can be displayed on the menu)

Setting box

Keep the “Show on all pages” option checked, since you want the menu to appear on all pages.

Click “Change Style” for advanced customization options.

“Show on all pages” & “Change Style”

Advanced Customization

You can choose between Text Menu and Buttons Menu (Extra Menu is similar to Text).

Choose between Text Menu and Buttons Menu

Click on Edit Style. Browse through the various menu skins to choose a new look.

Edit Style – Browse through the various menu skins

After choosing a skin, you can start editing the menu colors. You can choose a color for each menu function available for each skin (text color, mouseover text color, selected text color, etc.).

Editing the menu colors

Choose the font you like best (it may be necessary to make the menu bigger or smaller according to font changes).

Choose the font you like

Some skins will also have the option to edit the “Corner Sizes” and customize the external borders of the menu. We recommend that you keep “Lock Corners Together” checked.

Add or remove the shadow as you please.

Play with the Spacing dial to keep buttons closer together or bring them further apart.

“Corner Sizes”, Add or remove the shadow and button spacing

 

via HTML5 Tips: Customize Your Navigation Menu | The Official Wix Blog.

Posted in tutorials and tagged , , .

Leave a Reply