Skip to the content
Design and branding

Mobile navigation settings in the Design tab

Every setting of the Mobile navigation panel in the Design tab: the phone's top and bottom bars, their buttons and order, and the bottom bar's color.

Reference15 min read Updated

On this page

The phone's own bars are a bar along the top and a bar along the foot of the picture, each with a row of buttons. This page lists every setting of the Mobile navigation panel (Design tab > Mobile navigation) in the Design tab, in the order the panel shows them. To choose which bars a tour has, start with Customize the player's bars, sidebar and gallery.

Who can use it. The owner and, by default, an Admin collaborator can open the Design tab; it is not open to Editors or Viewers. Every plan has the phone's bars. The panel is in the Advanced view only: in the Basic view the module is not in the list, and what it saved stays in the tour. A tour on a Free plan that wears a Pro theme and has never been hosted shows visitors the free Default look, which puts every setting on this page back to the starting values (What visitors get).

When visitors get a change. The preview beside the panels shows it at once. Visitors get it after you click Save & Render, or after Publish changes when the tour uses Draft Workflows (My changes do not show for visitors).

When the phone layout is used. The page switches to it when the player is 768 pixels wide or narrower, a phone or a narrow embed. It is used only when something is ticked for it: any button of the bottom bar except the language switcher, or Scene Title Dropdown, VR Mode or Floor Plan in the top bar. With the starting values it is. Then the Icon bar is not drawn on a phone. A tour with nothing ticked keeps the screen's ordinary bars at that width.

This panel has no master switch. Each button has its own switch, and the two lists have no on or off of their own. The panel has three tabs: Top bar, Bottom bar and Style.

The top bar

These settings are on the Top bar tab, in the card Top bar features. The card's heading says how many buttons are on, for example 2 on. The card has a row for each button: a handle, its picture, its name and a switch. Under the rows a note says where the buttons go, which depends on the top bar the tour has: with the Top nav bar – dropdown on they are its icons on a phone; with only the Top nav bar – multi menu on they are in its phone strip; with that menu left off phones they make the phone's own top bar; and with no top bar at all they show nowhere, and the note says so.

Top bar features

The order of the rows is the order of the buttons. Drag a row, or press the up and down arrows beside it, to move it.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Top bar tab > card Top bar features. Advanced view. Default: dropdown, map, gallery, vr, lookAround, autorotate, fullscreen, sidebar, floorplan What it does: Sets the order of the buttons in the phone's top bar. The rows are named as the same buttons are in the other bars: an icon has one name everywhere. A row that is switched off keeps its place in the list. What visitors see: The buttons that are on, in that order, from left to right. Related: Icon lists of the other bars.

Scene Title Dropdown

Shows the name of the room as a button that opens the list of rooms.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Top bar tab > Top bar features > Scene Title Dropdown. Advanced view. Default: off What it does: Puts the room title button in the phone's top bar. Switching it on also turns the phone layout on for the tour. What visitors see: The room's name; a press opens the same room list the top bar has on a computer. Related: Scene Title Dropdown in the Bottom bar tab.

Map

Opens the tour's map from the top bar.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Top bar tab > Top bar features > Map. Advanced view. Default: off What it does: Shows the Map button in the phone's top bar. What visitors see: A map button. It is left out for a tour in which no panorama has a position. Needs: Panoramas with a position, and, when the tour has the Top nav bar – dropdown, Map switched on in that bar's own Icons tab as well.

Room Pictures

Lets the strip of room thumbnails show on a phone.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Top bar tab > Top bar features > Room Pictures. Advanced view. Default: off What it does: While it is off, the thumbnails strip is taken off the screen on a phone. Switching it on leaves them to the Bottom nav – thumbnails settings. What visitors see: With it off, no thumbnails strip on a phone; with it on, the strip as the tour's own settings draw it. Related: Room Pictures in the Bottom bar tab, which is a button that opens the pictures.

VR Mode

Enters VR from the top bar.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Top bar tab > Top bar features > VR Mode. Advanced view. Default: off What it does: Shows the VR button in the phone's top bar. Switching it on also turns the phone layout on for the tour. What visitors see: A VR button; it asks the player to enter VR mode. Needs: When the tour has the Top nav bar – dropdown, VR Mode switched on in that bar's own Icons tab as well. Related: VR mode and Cardboard support.

Look Around

The view follows the phone as it turns.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Top bar tab > Top bar features > Look Around. Advanced view. The row is listed only for a tour on the new tour engine. Default: off What it does: Adds the button to the phone's top bar. What visitors see: The button is drawn on a phone or a tablet, never on a computer, and only where the player says the device can. A press the view follows the device, and another press stops it. While it is on the tour does not turn by itself. On an iPhone or iPad the browser may first ask to allow motion; this was read from the code and not tried on a device. Needs: A tour on the new tour engine.

Autorotate

Starts and stops the automatic turning from the top bar.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Top bar tab > Top bar features > Autorotate. Advanced view. Default: off What it does: Shows the play and pause button in the phone's top bar. What visitors see: A play or pause button that follows whether the tour is turning. Needs: When the tour has the Top nav bar – dropdown, Autorotate switched on in that bar's own Icons tab as well.

Fullscreen

Takes the player full screen from the top bar.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Top bar tab > Top bar features > Fullscreen. Advanced view. Default: on What it does: Shows the full screen button in the phone's top bar. What visitors see: A button that toggles full screen, where the visitor's browser allows it. Needs: When the tour has the Top nav bar – dropdown, Fullscreen switched on in that bar's own Icons tab as well.

Side Nav - List Menu

Opens the side menu from the top bar.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Top bar tab > Top bar features > Side Nav - List Menu. Advanced view. Default: on What it does: Adds the menu button to the phone's top bar. A tour with this on has the side menu on its page even when Enable side nav is off; the menu is then there for the phone only and starts shut. What visitors see: A menu button; a press opens and shuts the list of rooms. Related: Side nav settings.

Floor Plan

Opens the floor plan from the top bar.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Top bar tab > Top bar features > Floor Plan. Advanced view. Default: off What it does: Shows the floor plan button in the phone's top bar. Switching it on also turns the phone layout on for the tour. What visitors see: A floor plan button. It is left out for a tour with no floor plan. Needs: A floor plan, and, when the tour has the Top nav bar – dropdown, Floor Plan switched on in that bar's own Icons tab as well. Related: Floor plans and the minimap.

The bottom bar

These settings are on the Bottom bar tab, in the card Bottom bar features, a list of rows like the one above. The bar runs along the foot of the picture on a phone. With nothing ticked in it, only a top feature makes the phone layout and the bottom bar is not drawn.

Bottom bar features

The order of the rows is the order of the buttons. Drag a row, or press the up and down arrows beside it, to move it.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Bottom bar tab > card Bottom bar features. Advanced view. Default: dropdown, lang, autorotate, fullscreen, vr, lookAround, floorplan, map, sidebar, gallery, listRooms What it does: Sets the order of the buttons in the bottom bar. A row that is switched off keeps its place in the list. What visitors see: The buttons that are on, in that order, spread evenly along the bar.

Scene Title Dropdown

Shows the name of the room as a button that opens the list of rooms.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Bottom bar tab > Bottom bar features > Scene Title Dropdown. Advanced view. Default: on What it does: Puts the room title button in the bottom bar. It is the top bar's own button, moved here, so the tour has the top bar's room list on its page. What visitors see: The room's name in the bar; a press opens the list of rooms. Related: Scene Title Dropdown in the Top bar tab.

Language Switcher

Lets a visitor change the language of the tour.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Bottom bar tab > Bottom bar features > Language Switcher. Advanced view. Default: on What it does: Adds a globe button with the tooltip Change Language. It does not by itself make the phone layout apply to the tour. What visitors see: A globe that opens a list of the tour's languages by code (EN); choosing one reloads the tour in that language. A tour with one language shows no globe. Needs: At least two languages in the tour. Related: A tour in several languages.

Autorotate

Starts and stops the automatic turning from the bottom bar.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Bottom bar tab > Bottom bar features > Autorotate. Advanced view. Default: off What it does: Adds a button with the tooltip Toggle Autorotate. What visitors see: A play or pause button that follows whether the tour is turning.

Fullscreen

Takes the player full screen from the bottom bar.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Bottom bar tab > Bottom bar features > Fullscreen. Advanced view. Default: off What it does: Adds a button with the tooltip Toggle Fullscreen. What visitors see: A button that toggles full screen, where the visitor's browser allows it.

VR Mode

Enters VR from the bottom bar.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Bottom bar tab > Bottom bar features > VR Mode. Advanced view. Default: off What it does: Adds a button with the tooltip Enter VR. What visitors see: A VR button; it asks the player to enter VR mode. Related: VR mode and Cardboard support.

Floor Plan

Opens the floor plan from the bottom bar.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Bottom bar tab > Bottom bar features > Floor Plan. Advanced view. Default: on What it does: Adds a button with the tooltip View Floorplan. What visitors see: A floor plan button. It is left out for a tour with no floor plan. Needs: A floor plan. Related: Floor plans and the minimap.

Map

Opens the tour's map from the bottom bar.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Bottom bar tab > Bottom bar features > Map. Advanced view. Default: off What it does: Adds a button with the tooltip View Map. What visitors see: A map button. It is left out for a tour in which no panorama has a position. Needs: Panoramas with a position.

Side Nav - List Menu

Opens the side menu from the bottom bar.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Bottom bar tab > Bottom bar features > Side Nav - List Menu. Advanced view. Default: off What it does: Adds a menu button with the tooltip Menu. A tour with this on has the side menu on its page even when Enable side nav is off; the menu is then there for the phone only and starts shut. What visitors see: A menu button; a press opens and shuts the list of rooms. Related: Side nav settings.

Room Pictures

Opens the pictures of every room.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Bottom bar tab > Bottom bar features > Room Pictures. Advanced view. Default: on What it does: Adds a button with the tooltip View Gallery. What visitors see: The button opens the Media Window on its Pictures tab. Related: Media window.

List All Rooms

Opens a list of every room by name.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Bottom bar tab > Bottom bar features > List All Rooms. Advanced view. Default: off What it does: Adds a button with the tooltip View All Rooms. Switching it on also gives the Media Window its Room list tab. What visitors see: The list of rooms in the Media Window. Related: Media window.

Look Around

The view follows the phone as it turns.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Bottom bar tab > Bottom bar features > Look Around. Advanced view. The row is listed only for a tour on the new tour engine. Default: off What it does: Adds the button to the bottom bar. What visitors see: As in the top bar: drawn on a phone or a tablet only, and only where the player says the device can. Needs: A tour on the new tour engine. Related: Look Around in the Top bar tab.

Colors of the bottom bar

These settings are on the Style tab, in the card Background. They are for the bottom bar. The top bar on a phone wears the theme's panel color.

Overlay colour

The color of the bottom bar.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Style tab > card Background > Overlay colour. Advanced view. Default: none: the field is empty, which means automatic What it does: Left empty, the bar wears the theme's panel color, the color the field shows. Choosing a color lays that color on the bar at the opacity below. The link Use automatic empties the field and puts the opacity back to 100 percent. A theme you save or update from this tour carries what is set here. What visitors see: The bar in that color. Related: Overlay opacity, Brand colors.

Overlay opacity

How solid the bottom bar's color is.

Where: the Mobile navigation panel (Design tab > Mobile navigation), Style tab > card Background > Overlay opacity. Advanced view. Default: 100 percent What it does: A slider from 0 to 100. At 0 percent the bar has no background at all: no tint, no blur and no line along its top, so the buttons stand on the picture. What visitors see: A bar that lets more of the picture through as the number falls. Related: Overlay colour.

Troubleshooting

The phone shows the same bars as a computer. The phone layout is used only when something is ticked for it: a button in Bottom bar features other than Language Switcher, or Scene Title Dropdown, VR Mode or Floor Plan in Top bar features. A change that is not saved or published does not reach visitors yet.

A button I ticked in the top bar is missing. Map needs panoramas with a position and Floor Plan needs a floor plan. With the Top nav bar – dropdown, the icon must also be on in that bar's own Icons tab. With no top bar on the tour, the top bar's buttons show nowhere; the note under Top bar features says so.

The Icon bar is missing on a phone. It is not drawn while the phone layout is used. See Icon bar settings.

There is no globe. Language Switcher shows only for a tour in at least two languages.

There is no Look Around row. It is listed only for a tour on the new tour engine, and its button appears only on a phone or a tablet.

I cannot find the panel. Mobile navigation is in the Advanced view only. Click Advanced.

Was this article helpful?