Fixed Navigation For ReachDeck

ReachDeck 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 on their page. As each site is different it is not possible for ReachDeck to automatically detect all elements that are fixed to the top of a given page. 

Desktop: (There are two options for the desktop toolbar)

1. Switch to a floating toolbar - Visit the customer portal and select the specific url you wish to update. Follow the wizard to step 2 and change “Toolbar Type” to “Floating toolbar” then click “Save and Finish”. This will update ReachDeck on your site to a floating toolbar which will no longer obstruct your fixed navigation.

2. Adjust your top navigation element - We have also added a way for you to inform the ReachDeck toolbar which elements on your page will need to be updated when the ReachDeck fixed toolbar pushes down from the top of the page. ReachDeck 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 ReachDeck as shown below:

<script> var _baFixedNav = ["exampleNavigationId", "exampleNavigationButtonId"]; </script>

The variable outlined above, “_baFixedNav” is used to tell ReachDeck 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>

Mobile:

When a user visits your site on a mobile device the toolbar is fixed at the bottom of the screen. This may cause issues if your site has its own navigation element fixed to the bottom of the screen. The following JavaScript code can be implemented on your site which will force your fixed bottom nav to sit above the ReachDeck toolbar when on mobile.

You will need to add the following code to your HTML page just before the script tag which injects ReachDeck. You need to specify the id of the container of your fixed navigation bar in the first line of the script, so be sure to change this when inserting this code:

<script>
   var bottomNavId = "yourBottomNavId"; //change this to the same ID as your bottom nav
   //detect if mobile and if toolbar is open or closed and apply bottom style
   var showHide = function(){
       var isMobile = window.innerWidth <= 800 ? true : false;
       if(isMobile){
           //check for toolbar div
           var toolbar = document.getElementById("__bs_entryDiv")?.lastElementChild?.shadowRoot || null;
           if(toolbar !== null){
               var show = false;
               //loop toolbar div to see if toolbar is active
               for(var t = 0; t < toolbar.childNodes.length; t++){
                   if(toolbar.childNodes[t].id =="th_toolbar"){
                       show = true;
                   }
               }
               if(show){
                   //gets bottom nav element and applies a bottom style of 60px so it sits above the BA mobile toolbar
                   try{
                       var fixedNav = document.getElementById(bottomNavId);
                       fixedNav.style.bottom = "60px";
                   }catch(e){}
               }else{
                   //gets bottom nav element and clears bottom style
                   try{
                       var fixedNav = document.getElementById(bottomNavId);
                       fixedNav.style.bottom = "";
                   }catch(e){}
               }
           }
       }else{
           //gets bottom nav element and clears bottom style
           try{
               var fixedNav = document.getElementById(bottomNavId);
               fixedNav.style.bottom = "";
           }catch(e){}
       }
   }
   //function to set a listener on the toolbar element for opening and closing
   var setToolbarListener = function(){
       var checkForToolbar= setInterval(function(){
           let toolbar = document.getElementById("__bs_entryDiv")?.lastElementChild?.shadowRoot || null;
           if(toolbar !== null){
               // Options for the observer (which mutations to observe)
               const config = {childList: true};
               // Create an observer instance linked to the callback function
               const observer = new MutationObserver(showHide);
               // Start observing the target node for configured mutations
               observer.observe(toolbar, config);
               clearInterval(checkForToolbar);
           }
       },100);
   }
   //load listener to apply the other listeners on the toolbar
   window.addEventListener("load", function () {
       var checkBA = setInterval(function(){
           if(typeof(BrowseAloud) != "undefined"){
               showHide();
               setToolbarListener();
               clearInterval(checkBA);
           }
       },100);
   });
   //resize listener to check bottom nav on resize
   window.addEventListener("resize", showHide);
</script>