Fixed Navigation for Browsealoud V3

Browsealoud V3 offers a new toolbar design and new UX on tablet and desktop with the toolbar pushing down from the top of the page. This may cause conflicts on sites that already contain a fixed navigation bar at the top of their page. As each site is different it is not possible for Browsealoud to automatically detect all elements that are fixed to the top of a given page. 

We have added a way for you to inform the Browsealoud toolbar of which elements on your page will need to be updated inline with the Browsealoud toolbar pushing down from the top of the page.

Browsealoud will require the ID of the navigation element or any elements with the css properties “position: fixed” and “top: 0” . You will need to add a line of code to your HTML page just before the script tag which injects Browsealoud as shown below:

<script> var _baFixedNav = ["exampleNavigationId", "exampleNavigationButtonId"]; </script>
<script src="https://www.browsealoud.com/plus/scripts/ba.js" type="text/javascript" ></script>

The variable outlined above, “_baFixedNav” is used to inform Browsealoud of the IDs of any elements that are fixed to the top of your page. “_baFixedNav” is of type array and thus should follow the format of “_baFixedNav = [ string ]” even if only one ID has been entered.

For example: <script> var _baFixedNav = ["exampleNavigationId"]; </script>