Customising Menus for Mobile

You can control the appearance of the website menu on mobile devices. Customise menu display, fonts, and the hamburger (the square button in the corner of a mobile screen that opens and closes the menu).

Locating the Navigation Component

Customise the design and appearance of your website menu with the Navigation Component. To find the Navigation Component:

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 the Homepage.
4. Click the Edit button. The Edit Content area opens.
5. Scroll up to the top of the page.
6. Hover the mouse pointer on the Header Component.
7. Click the Pencil button to open the header edit area.
8. Hover the mouse pointer on the Navigation Component.
9. Click the Settings button in the top left corner. A Navigation Settings panel opens.

1  Opening the Mobile Appearance panel

On the Navigation Settings panel, click the Mobile Appearance tab.

The Mobile Appearance panel has four sets of customisation options:

• mobile colours
• hamburger icon
• social icon
• multilingual link

2  Customising mobile colours

The top part of the Mobile Appearance panel controls the colour of the menu on mobile devices. Choose from the colour palette, or from your set of branding colours (if selected).

Font Color

Change the colour of the menu text.

Background Color

This is the colour behind the menu text.

Separator Color

The separator is the divider line between menu items.

3  Customising the hamburger icon

The hamburger icon is a button in the top corner of mobile devices. This button opens and closes the full menu display. The hamburger consists of three horizontal bars on a background colour. 

Icon Color

Set the colour of the three bars that make up the hamburger icon.

Icon Background Color

Set the background colour of the hamburger icon. To maximise readability, this colour should contrast with the Hamburger Icon Color.

Top

Click the plus (+) or minus (-) boxes to move the hamburger icon closer to or further from the top of the mobile screen.

Right

Click the plus (+) or minus (-) boxes to move the hamburger icon closer to or further from the right side of the mobile screen.

4  Customising social media icons

In the Chinese market, it is good practice to place social media buttons at the top of the mobile menu. To do that, add a Social Component to your website and configure it to display only on mobile devices. 

1. Go to the Edit Content area of the Homepage.
2. Drag a Social Component to the page and place it under the header.
3. Hover the mouse pointer on the Social Component.
4. Click the Settings button in the top left corner. A Social Settings panel opens.
5. Click the Advanced tab.
6. On the Component Visibility line, click the Phone button. This displays the component only on mobile devices.
7. Click OK and then Save at the top of the Edit Content page.

Check your work.

1. Go to the Edit Content area of the Homepage.
2. Scroll up to the top of the page and then click the Preview. A new tab opens.
3. In the Preview Display Options panel, click the Phone button.
4. The social media buttons display beside the hamburger icon
5. Click the hamburger to open the menu and the social buttons disappear.
6. Click the hamburger to close the menu and display the social buttons.

5  Customising a language link

You can add a link to a site with content in another language. 

The multilingual controls let you customise the appearance of the link on the mobile menu. For more information about how to insert a link to multilingual content, see:

• Adding a Multilingual Page Link

Menu Title

Type a word or phrase to give the menu item a title. Use the built-in translator to change the English title to Simplified Chinese.

Menu Item Color

Set the colour of the text font.

Menu ItemSelected Color

Set the colour of the text font after the link has been selected.