Changing Mobile Navigation Background

This article shows you how to customize the background colour of the website navigation on mobile devices. 

Navigation is one part of the header that sits at the top of a website. The navigation has menu items which link to various website sections or pages. 

Comparison

On the Sinorbis platform, the background colour of the navigation can be different for mobile devices and desktop monitors.

Here is an example.

• The image below shows a white background for the navigation on desktop computers.

• Below, the image shows the same navigation on a phone with a grey background.

1  Opening the settings panel

The first step is to open the Navigation settings panel.

1. Open the Website Content page.
2. Hover the mouse pointer on the Home page. The Edit button displays.
3. Click the Edit button. The Edit Content page displays.

4. Scroll up to the top of the Edit Content page and then hover the mouse pointer on the Header. The Edit Header button displays.

5. Click the Edit Header button. The Header opens.
6. Hover the mouse pointer on the Navigation. A toolbar displays.

7. Click the Settings button in the top left corner of the toolbar. The Navigation Settings panel displays.

 2  Changing the background colour

This step shows you how to change the background color of the navigation when viewed on a mobile device. The changes you make here do not change the appearance of the navigation on desktop computers.

1.  With the Navigation Settings panel open, click the Mobile Appearance tab. The Mobile Appearance settings panel displays.
2. Click the colour square on the Background Color line. The Colour Picker displays.

3. Select a colour or choose one of the branding colours and then click OK. The panel closes.

4. Click OK on the Mobile Appearance panel. The panel closes and the Edit Content page displays.
5. Click the Save button on the Header. The Edit Header panel closes.

3  Previewing changes

This step shows you how to preview changes. When you are satisfied with the results, click Publish. The changes you make and save are not live until you click the Publish button. 

1. At the top of the Edit Content page, click Save and then Preview. The Preview panel displays.

2. Click the Phone icon. The Phone Preview mode displays.

3. Click the hamburger. The navigation displays with the new background colour.