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
- Click WEBSITE on the top menu bar.
- On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays.
- Hover the mouse pointer on Homepage.
- Click the Edit button. The Edit Content area opens.
- Hover the mouse pointer on the Header Component.
- Click the Pencil button in the bottom right corner of the component. The Header Component becomes bright and the rest of the page dims.
- Hover the mouse pointer on navigation menu text.
- Click the Settings button in the top left corner. The Navigation Settings panel displays.
- 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:
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.
- Go to the Navigation Settings panel.
- Choose Main Menu Spacing on the menu.
- 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.
- Go to the Navigation Settings panel.
- Choose Sub Menu Spacing on the menu.
- 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:
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:
Comments
0 comments
Please sign in to leave a comment.