Customising the Desktop Menu

In this article, learn how to control the style and behaviour of text in the navigation menu.

• Style means the way the text looks. That includes font, font size, and font colour.
• Behaviour means the way text changes when it is clicked or when the mouse pointer hovers. Behaviour includes underlines and colour changes.

See Also

• To build a navigation menu, see Creating a Desktop Menu.
• To optimise your site’s menu for mobile devices, see Customising Menus for Mobile.

1  Opening the Navigation Settings panel

1. Click WEBSITE on the top menu bar. 
2. On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays. 
3. Hover the mouse pointer on Homepage.
4. Click the Edit button. The Edit Content area opens.
5. Hover the mouse pointer on the Header Component.
6. Click the Pencil button in the bottom right corner of the component. The Header Component becomes bright and the rest of the page dims.
7. Hover the mouse pointer on navigation menu text.  
8. Click the Settings button in the top left corner. The Navigation Settings panel displays.
9. Click Desktop Appearance in the Navigation Settings panel.

2  Customising Desktop Appearance settings

Style settings are at the top of the Desktop Appearance Settings panel. Behaviour settings are near the bottom of the panel.

Font Color

Click the palette to change the colour of menu text. Click the square button to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette. For information about branding colours, see:

• Customising Brand Colours

Font Size

Click the plus (+) or minus (-) boxes to increase or decrease font size.

Font

Scroll through the menu to review and select fonts for Simplified Chinese and English. 

Background Color

Change the colour behind the menu text. Click the Color panel to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette.

Underline on Hover

If checked, a line appears below the menu text when the mouse pointer is hovering that text. The underline colour is the same as the Active Font Color. 

Active Background Color

When a mouse pointer hovers the menu text, a colour box appears around the text. Click the square button to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette. Click the transparency box to remove the active background colour.

Active Font Color

If a mouse pointer hovers menu text, the menu text colour changes. Click the square button to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette.

Menu Hover Background Color

Set the background colour of the submenu. Click the square button to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette.

Menu Hover Font Color

Set the font colour for submenu text. Click the square button to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette.

Menu Item Min Width

Set the smallest width for the menu. Width cannot be larger than the component that holds the menu.

Border Width

Create a border around the menu. Click the plus (+) or minus (-) boxes to adjust the thickness of the border.

Border Type

Select a borderline type: solid, dash, or dots.

Border Radius

Add a rounded edge to border corners. The higher the number, the rounder the corner.

3  Customising main menu spacing

Use the Padding controls to adjust the position of the main menu items inside the Navigation Component.

1. Go to the Navigation Settings panel.
2. Choose Main Menu Spacing on the menu.
3. Click the plus (+) or minus (-) boxes to increase or decrease the space between the menu items and the inside walls of the Navigation Component.

There are four elements to control: Padding Top, Padding Right, Padding Bottom, and Padding Left.

4  Customising submenu spacing

Use the Padding controls to adjust the position of the submenu items inside the Navigation Component. The submenu displays when the mouse pointer hovers a top-level menu item.

1. Go to the Navigation Settings panel.
2. Choose Sub Menu Spacing on the menu.
3. Click the plus (+) or minus (-) boxes to increase or decrease the space between the submenu text and the inside walls of the submenu compartment.

There are four elements to control: Padding Top, Padding Right, Padding Bottom, and Padding Left.

5  Customising Advanced features

ID or Class Name

To learn about custom styling with ID and Class Name selectors, see:

• Adding CSS

Component Visibility

Control which devices display the content. The default is all devices. To learn about visibility settings and how to set the display for desktop-only, see:

• Customising Visibility