Article - Customizing Site Menu Background, Border, Shadow, Font and Spacing

Your Website.com Editor allows you to customize the background, border, shadow, font and spacing of your site menu bar.

You can access the Menu customization panel by clicking on your site menu bar.

Customizing site menu border:

1. On the Menu customization panel, click on Style.

 

2. On the Style menu, select Border.

3. Use the color picker to select the active/current page link border color. 

4. Use the color picker to select the border color for the hover page link.

5. Use the Width sliders to set the border widths. You can also enter the numeric value, in pixels, in the text field provided.

Changes are auto-saved and will apply automatically. 

 

Customizing site menu background:

1. On the Menu customization panel, click on Style and then select Background. 

 

2. Use the color picker to select the desired background color.

3. Use the color picker to select the desired active/current page link background color.

4. Use the color picker to select the desired hover background color.

Changes are auto-saved and will apply automatically.

 

Changing submenu background color:

1. On the Background tab of the Menu Style customization panel, click on the Submenu sub-tab. 

 

2. Use the color picker to select the desired background color.

3. Use the color picker to select the desired active/current page link background color.

4. Use the color picker to select the desired hover background color.

Changes are auto-saved and will apply automatically.

 

Changing the font style of your site menu:

1. Click on Font on the Menu Style customization panel. 

 

2. Use the Font type drop-down menu to select the new font type.

3. Select the desired font size.

4. Use the color picker to select the new font color.

5. Select the desired styles: bold, italics, underline.

Changes are auto-saved and will apply automatically. 


Changing the font style of your submenus:

1. On the Font tab of the Menu Style customization panel, click on the Submenu sub-tab. 

2. Use the Font type drop-down menu to select the new font type.

3. Select the desired font size.

4. Use the color picker to select the new font color.

5. Select the desired styles: bold, italics, underline.

Changes are auto-saved and will apply automatically. 


Customizing menu spacing:

1. Click on Spacing on the Menu Style customization panel. 

 

2. Use the Item Spacing slider to set the spacing between menu items.

3. Select the desired text padding.

Changes are auto-saved and will apply automatically. 

 

Not all site menu layouts support border customizations. If the menu layout you have select does not support border customizations, you will not see the border section on your Menu panel.

 

Published: August 19 2015