Tutorial: Creating A Responsive Navigation Bar
FluenceXL’s Dashboard Designer allows for the creation of responsive and dynamic dashboards. The steps below outline how to create a full-width navigation bar for a multi-sheet dashboard suited to any screen size.
1. Create a navigation bar design in an Excel sheet.
This should include XL3Links that link to the required pages, and could also feature a company logo, title etc.
2. Duplicate this design and create a highlighting for each page.
This will make it clear which page is the one being displayed. Each page will need a viewport which points to the relevant range.
3. Create a paged viewport that points to this range on the dashboard sheet.
The viewport should be set to ‘Scale to fill’ and ‘Lock aspect ratio’.
4. Set the background of the paged viewport.
To create the effect of a continuous full width navigation bar, this should be set to be the same as the fill colour of the navigation bar design.
Any page in your dashboard/workbook will need a new paged viewport that points to the relevant highlighted design. If the row heights are the same across each page it will appear as the navigation bar is fixed but the highlighted cell moves across.
Setting Different Targets
It may be that the navigation bar fits well in landscape or large screens, but becomes too small for mobile views. With the use of dashboard targets, it is possible to create different layouts for different screen sizes - and also different navigation bars.
1. Create a second design which will be used for mobiles.
Use the same colour scheme and fonts to give the appearance of a continuous design. Highlighting for each page will be needed as before.
2. Create a new target in the dashboard. Hide the original paged viewport and create a new one that points to the mobile navigation bar design.
Go into design mode on the dashboard sheet and select 'Edit targets' in the dashboard panel. Add a new target for mobile portrait, select ok, then switch to editing this target. Under the item settings, hide the original viewport that displays the full width navigation bar. Create a new paged viewport using the same method before that points to the mobile design.
This new paged viewport will then need to be hidden on any other dashboard targets.
The dashboard will display the best fitting target for the screen size, so when viewing on a mobile the navigation bar will appear to be rearranged.
You may find unexpected white borders in the viewport when viewing in Chrome or Firefox. You can fix this by setting the background colour on the entire sheet holding the navbar range, rather than just the range itself.
