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.

Opening the Navigation Settings panel

Click PUBLISH on the top menu bar. A popup window displays. Click Website Content > Manage.

The Website Content page displays.

1. Hover your mouse pointer on the Homepage.
2. Click the Edit button. The Edit Content area opens.

Hover the mouse pointer on the Header Component.

1. Click the pencil button in the bottom right corner of the component. The Header Component becomes bright and the rest of the page dims.
2. Hover the mouse pointer on navigation menu text.  
3. Click the Settings button in the top left corner. 

The Navigation settings panel displays.

1  Alignment

Choose how to align content: to the left, in the centre, or to the right.

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 a font for Simplified Chinese and English. We recommend the Simplified Chinese font Microsoft YaHei. It displays well on all devices.

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. Use the settings to control the line color as well as thickness, padding, and width.

Active Background Color

When a mouse pointer hovers 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 Color

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

Border Radius

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

3  Customising Mobile Appearance settings

We describe mobile appearance settings in a different article. Click here to learn more.

4  Customising Main Menu Spacing

Use the Padding controls to adjust the position of the main menu items inside the Navigation Component. Click the plus (+) or minus (-) boxes to increase or decrease the space between the menu items and the inside walls of the Navigation Component.

5  Customising Sub Menu Spacing

The submenu displays when the mouse pointer hovers a top-level menu item. Click the plus (+) or minus (-) boxes to increase or decrease the space between the submenu text and the inside walls of the submenu compartment.

6  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.

7  Links

Click the Manage Links tab. The panel opens and displays the current menu items. Click the Add New Link button to add a new item to the navigation. Click the bin icon to remove a link from the navigation.

To update an existing link:

1. Click the pencil button beside the menu item you want to change. The Link Settings panel displays.
2. Delete existing text and enter new menu text on the Label line.
3. Click the pencil button. The Link Picker displays.
4. You can link to a Sinorbis Website Page or insert a custom URL.
5. Click OK.
6. To open a link in a new tab, check the box. (optional)
7. Click OK.

If you link to a Sinorbis Website Page, scroll down the list and check the box beside the page you want. If you select Custom URL, type or paste the URL with the http:// or https:// prefix.

Optionally, you can drag links to reorder and create sub-menu items by dragging to the right.