Customising Menus for Mobile – Sinorbis

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

Opening the Navigation settings panel

The first step is to open the Navigation settings panel. Click PUBLISH on the top menu bar. A popup window displays. Click Website Content > Manage.

The Website Content page displays.

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

Untitled design.png

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 the Mobile Appearance tab. The Mobile Appearance panel has five sets of customisation options: mobile colours, hamburger icon, social icons, multilingual links, and search appearance.

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

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

3 Customising social media icons

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.

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

Check your work.

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

4 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 a language based on locale.
Menu Item Color - Set the colour of the text font.
Menu Item Selected Color - Set the colour of the text font after the link has been selected.

5 Customising Search Appearance

Check the Show in Mobile Menu box to display the search bar on mobile devices. This feature only applies if you enable the Search component.