Top menu has three blocks, Categories in the center, Buttons on the right and Text on the left. Left and right blocks can have any width, but central block width is calculated automatically, and aligned to the right. On small screens, when it's not enough space for category block - text block will be hidden.

Max height for pane independently of how many items are assigned to it. If there's not enough height fot items they will be scrollable. If set 0, then the height of the category panes will be different, depending on the number of assigned items.

Gap

Vertical gap between category button and top of the pane, see image below.

Arrow size

Set 0 to not to use arrow on top of the pane.

Foldable groups

Enable to start with folded menu items which corresponds to Panotour groups to hide panoramas items in it.

Devices settings

Enable to use separate width for devices, if set 0, then separate value is not using for this setting. If for max height, gap and arrow size set 0, then 0 will be using.

Categories block is the main element of the menu, every category is presented by custom icon and it opens a pane which can include menu items related to groups and panoramas. You can find categories settings section in the bottom of the plugin settings interface. There's no limitation for categories quantity. Video: Create category .

Select your images (png or jpeg) for category. Active icon appears on hovering or clicking category button. For the best user experience prepare icons to be identical size and centering, also compress your images keeping the ballance between filesize and quality.

You can control which appears first, groups then panoramas or vice versa, in the categoty pane. There is a checkbox option for that - "Generate groups items first", you can find it in the Menu Style section.
However, currently there is no setting to control order which group appears as first, and which group next, the same for panoramas. This order controlled by ID number, the below example have a workaround for that.

Example, if you have two groups (id01, id02) and two single panoramas (id01, id02) with enabled option "Generate groups items first" you will get category with this order: group "Streets"(id1), group "Interiors"(id2), pano(id1), pano(id2).
If you want to display "Interiors" first and then "Streets" you can duplicate group "Streets", new identical group will be created by Panotour, it will have latest ID (id3 in this case), then remove group "Streets" (ID1). Now, in the category you have order like this: "Interiors"(id2), "Streets"(id3), pano(id1), pano(id2).

Buttons block placed on the right side of the menu, it's invisible but includes "main" button and separator image. Settings for buttons block you can find in the "Block of contents settings > Buttons block".

Enable to use separate size for devices, if for width or height set 0, then separate size is not using for this setting.

Button title

Title which appears as tooltip.

X-offset

Horizontal position offset from the right side.

Icon/Mouse-over icon files

Select your images (png or jpeg) for the main button. Mouse-over icon appears on hovering or clicking the main button. For the best user experience prepare icons to be identical size and centering, also compress your images keeping the ballance between filesize and quality.

Main button action

Select "custom actions" to add any Panotour actions. Select "show more buttons" to display more buttons, this will show hidden sections of additional buttons settings.

Additional buttons aligned vertically and hidden at start, there's no limitation for buttons quantity. Every button can have one of Panotour actions (one action because of Panotour limitation in the plugin interface.).

Additional buttons size

In this section you can set Width, Height and Gap. Gap is the distance between buttons and between Main button and the first additional.

Devices settings

Enable to use separate size for devices, if for width or height set 0, then separate size is not using for this setting. If for gap set 0, then 0 will be using.

Additional buttons creation

To create new button duplicate "Additional button" section by pressing the plus icon on the right. And set individual settings in every section.

Button title

Title which appears as tooltip.

Desktop / Tablet / Mobile

Check on which device this button will be presented.

Button Icon/Mouse-over icon files

Select your images (png or jpeg) for the button. Mouse-over icon appears on hovering the button. For the best user experience prepare icons to be identical size and centering, also compress your images keeping the ballance between filesize and quality.

To use any font from Google fonts library, just select "Custom font" in the dropdown list of the Edit mode font option and enter the font name in the field that appears. Click apply button to see the changes.

There is also a possibility to use custom ttf font, this requires some additional preparing.
Select "Custom font" in the dropdown list of the Edit mode font option and enter the font name in the field that appears. To mark that the font is a custom one and it should be loaded from your assets, add an underscore before and after the font name. So if your font name is Alex Brush it should be _Alex Brush_ .
The final step should be done after the tour is built. Add font style data into the main html page, this requires to open main html file with the code editor software (e.g. Atom, VS code, Sublime, Notepad++). Add the following code between any style tags. This modification will be lost after re-building the tour and you'll have to do it again.
@font-face {
font-family: '_Alex Brush_';
src: url('./indexdata/fonts/Alex Brush.ttf');
}
Add folder "fonts" with ttf file to your tourdata directory, to make font accessible with the url that was set in the previous piece of code (indexdata/fonts/Alex Brush.ttf).

Executes click action of the main button. It also activates the button.

Function: alpoTM.toggleMainBtn()

If for the main button action selected Custom actions, you'll need to call Deactivate main button function after this with a timeout, for Panotour actions this would looks like this: (function(){alpoTM.toggleMainBtn();setTimeout(alpoTM.deactMainBtn,100)})()

Parameter: '{"nX":"N", "nY":"N", "iX":"N", "iY":"N", "ttm":"TN", "ttp":"T", "tgl":"false"}'nX - [optional] new X position, where N is any number. Position value to tween to.nY - [optional] new Y position, where N is any number. Position value to tween to.iX - [optional] initial X position, where N is any number. This sets position value which will be using as initial when toggle back.iY - [optional] initial Y position, where N is any number. This sets position value which will be using as initial when toggle back.ttm - [optional] tween time. Where TN is a number in ms, 1000ms = 1 second. ttp - [optional] tween type. Where T is a name of tween type. Possible tween types: easeOutQuad, easeOutQuart, easeOutQuint, easeOutSine, easeOutBounce, easeOutCirc, easeOutCubic, easeOutExpo, easeOutBack, easeInQuad, easeInQuart, easeInQuint, easeInSine, easeInBounce, easeInCirc, easeInCubic, easeInExpo, easeInBack. Visualization of tween typestgl - [optional] Toggle position. If set "true", then position will be toggling between new and initial position values. If initial position is not passed, first position will be saved as initial.

Example 1: alpoTM.barPos('{"nY":"-100", "tgl":"true"}')

This will tween Top Menu Y position from current (for instance 0) to -100 and on the second execution of this function it will toggle back menu to 0.

Example 2: alpoTM.barPos('{"nY":"0", "tgl":"true", "ttm":"1000"}')

Put this action to the Top Menu start actions Panotour actions>advanced>Call a Javascript function and set delay of start action to 5000ms, set Bar settings>Position>Align to Top and Y Offset to -100px. In result the tour opens with hidden Top Menu bar, because it's -100px Y position and after 5sec. the bar is tweening to 0 and appears on top of the screen. Executing this function again will tween bar to -100px out of screen.