If you use a Menu skin component and proxy to include a topic menu in your HTML5 Top Navigation output, you can set that menu to be fixed in place. You can set a fixed menu for web, tablet, or mobile screens (or all of them).
- Open a Menu skin component.
- Select the Setup tab.
- In the Fixed Menu field, select one of the options:
- None The menu will not be fixed in the output.
- Web The menu will be fixed on screens that are larger than tablet and mobile.
- Tablet & Mobile The menu will be fixed on tablet and mobile screens.
- Mobile The menu will be fixed on mobile screens.
- All The menu will be fixed on all screens—web, tablet, and mobile.
- Click to save your work.
Let’s say you include a topic menu on the right side of your topics, but you do not choose to fix that menu. Initially, it might look something like this:
If you scroll down in the topic, notice that the menu moves up with the rest of the topic content:
On the other hand, if you set the menu to be fixed, it will not move when you scroll down in the topic:
If you include a side menu that is floating, with content wrapping under the menu—as is the case in Flare’s Top Navigation project templates—your content will likely be obstructed by the menu when users scroll down.
To solve this issue, you can change to a two-column format, where the content stays in one column while the menu resides in the other. To assist with this, Flare’s Top Navigation project templates contain a few extra files:
Skin Component For example, in the following template it is named “SideMenuFixed.”
Master Page For example in the following template it is named “OtherTopicsFixedSideMenu.”
Target For example in the following template it is named “HTML5 - Top Navigation FixedSideMenu.”
These files were added to make it easier for you to switch from a floating menu format to the two-column format. The skin component and master page mentioned are already edited and associated with the appropriate target. So if you create a new project based on one of Flare’s Top Navigation project templates, you can just use these files (instead of the related skin, master page, and target files that are not using a fixed menu) to take advantage of the two column format.
Maybe you already have an existing project where you are generating Top Navigation output with a side menu that is not fixed. You want to switch to a fixed side menu, but you do not want the menu to obstruct content that scrolls under it. Therefore, you want to also change to a 2-column format where the text flows on the left and the topic menu displays on the right.
In order to do this, you need to change the following:
- Skin Component You can update your Menu skin component using the steps already described. See How to Set a Fixed Menu.
- Master Page If your master page is configured to use one column, where text appears under the side menu, you will need to make changes to your master page accordingly. The easiest way to do this is to import a 2-column (i.e., fixed menu) master page from one of Flare’s Top Navigation project templates. See How to Incorporate a 2-Column Master Page.
- Styles In order for the imported master page to work correctly, you will also need to add the appropriate styles to your stylesheet. The easiest way to do this is to import those styles from one of Flare’s Top Navigation project templates. See How to Add Styles for a 2-Column Format.
The following steps describe one way that you can accomplish these tasks.
- Create a new temporary project
(see Creating a New Project), selecting one of the following Top Navigation templates in the process:
- Top Navigation Advanced
- Top Navigation Basic
- Top Navigation and PDF Advanced
- Top Navigation and PDF Basic
- Open your regular project and import the master page called “OtherTopicsFixedSideMenu”:
- In the Content Explorer, expand the Resources folder and right-click on the MasterPages subfolder.
Select New > Master Page.
In the Add File dialog, select New from existing and click next to it.
- In the dialog that opens, find the temporary project you created. Navigate to the Content > Resources > MasterPages location.
- Select OtherTopicsFixedSideMenu.flmsp and click Open.
- In the Add File dialog, click Add. The master page is added to your project and opens in the XML Editor.
In the imported master page, right-click the menu proxy bar and select Edit Menu Proxy.
From the Skin File, select the Menu skin component that you have set to “fixed.”
- Click OK.
- (Optional) If you have any content from your old master page that you want to keep, you can copy and paste it into this new master page.
- Click to save your work.
Alternatively, you can delete the older master page that you do not plan to use any longer. When doing this you can tell Flare not to remove any links. Then you can rename the new master page so that it has the same name as the deleted master page. This way, the new master page will be linked to whatever the old master page was linked to previously.
In the temporary project that you created in the previous set of steps, open the primary stylesheet. Depending on the template that you used to create the temporary project, the stylesheet will be named either “MainStyles” or “Styles.” Open this stylesheet in the Internal Text Editor by right-clicking it in the Content Explorer and selecting Open with > Internal Text Editor.
Scroll down until you see the styles that begin with div.ContentRow. There should be six of these styles. Select all of them, including the properties within brackets under them. Then copy them.
- In your regular project, open the stylesheet that your master page is using. Open it in the Internal Text Editor.
- Paste the copied div.ContentRow styles into the stylesheet. Just make sure you do not paste them within any existing curly brackets that are holding properties for other styles. To make it easy, you can scroll all the way to the bottom of the Internal Text Editor and paste them after the last bracket.
- Click to save your work.
Tip: Sometimes you might have a topic open in the output where the side menu is quite long, extending beyond the bottom of the window. The issue with having a fixed menu is that end users may not be able to see the links at the bottom of the menu because they are cut off, and the menu will not scroll because it is fixed in place.
To solve this problem, you can open your Menu skin component and edit the maximum height for the menu.
If the maximum height is less than the height of the screen being used to view it, a scroll bar will be added within the menu, allowing end users to see all of the links.
Note: This feature is supported in HTML5 Top Navigation output, but not in HTML5 Tripane output.