Navigation bar not shown when Refined theme is enabled

Problem

When using SubSpace Navigation for Confluence and a theme from Refined is enabled, the SubSpace Navigation bar will not be visible.

Solution

In order to fix this issue, we need to modify the theme by adding some custom HTML.

  1. As an admin, go to the “General Configuration“ > “Custom HTML“ page. You can find this page in the “LOOK AND FEEL“ section or you can search for it in the global search field.

  2. Click on the “Edit“ button.

  3. Copy the code below inside the “At end of the HEAD

    1. <script> AJS.toInit(function () { var headerElement = AJS.$("#header"); var navigationBarPro = AJS.$("#navigationbarpro"); if (headerElement.length !== 0 && navigationBarPro.length !== 0) { headerElement.css("display", "initial"); navigationBarPro.trigger("navigationchanged"); navigationBarPro.css("width", "100%"); } }); </script>
  4. Click on the “Save“ button.

  5. Go to the home page to check if the navigation bar is visible.

Navigation bar width

If the theme is using a sidebar navigation menu, the width of the SubSpace’s navigation bar needs to be adjusted so that it fits in the available space. Change the “100%“ to some other value which better suits your theme. This can be done by modifying the line below.

navigationBarPro.css("width", "100%");

Limitations

  • This workaround will make sure that the navigation bar is visible in all the pages except for the blog site.