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 that 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 and the same navigation on the phone with an orange background.

Opening the 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. Click the Mobile Appearance tab.

Changing the background colour

This step shows you how to change the background colour 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.

Click the colour square on the Background Color line. The Colour Picker displays. Select a colour or choose one of the branding colours and then click OK. The panel closes.

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

Previewing changes

At the top of the Edit Content page, click Save and then Preview. The Preview panel displays. Click the phone icon and then click the hamburger. 

The navigation displays with the new background colour.

• Note When you are satisfied with the results, click Publish. The changes you make and save are not live until you click the Publish button.