HTML5 Tips: Customize Your Navigation Menu

Designing with Wix | May 28th 2012

Customize your navigation menu

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

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

The Settings box will also appear

  • In the Settings box, you can perform the following:
  1. Align buttons to left, right or center
  2. Align button text to left, right or center
  3. Choose to keep all buttons in same size
  4. Choose to stretch the buttons to fill the entire space of the menu
  5. Edit text for the “More” button (in case you have so many pages that not all can be displayed on the menu)
Setting box

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"

“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

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

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

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

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

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

 

Click OK to save changes, and your menu is all set!

 


Tagged with: . .