Navigation icons for webhelp responsive questions

[sparklies2]

Hello,

I have oXygen v20.1 and I'm publishing using the webhelp responsive transformation. The navigation icons (navleft, navright, print etc) appear fine on the desktop version of the site, but are nowhere to be seen when viewed on my device. There is no way to navigate through pages at all other than via the breadcrumbs, which do not display other topics at the same level so many topics are unreachable. Is this by design (which seems odd) or have I made a mistake somewhere?

On a similar subject, is there any way of adding additional navigation icons to the topic pages? For example, placing them at the bottom of either the topic or the footer, in order to save readers from needing to scroll back to the top of the page when they want to read the next page.

Thank you!

[ionela]

Hi,

Indeed, the navigation links are by default hidden on mobile devices. I have added an improvement request to our issue tracking tool in order to reanalyze this.
However, using Oxygen XML v20.1 you could achieve the result you need following these steps:

• Save you favorite template as explained here: https://www.oxygenxml.com/doc/versions/ ... plate.html. Make sure you check the "Include HTML Page Layout Files" option.
• Open the resulted archive in Oxygen to edit the topic HTML page layout file "wt_topic.html".
• Add this code

  Code: Select all

  
  <div id="custom_nav" class="text-center hidden-md hidden-lg">
  
              <whc:webhelp_navigation_links/>
  
          </div>

  right before the end tag of the <body/> element. This will add the navigation links at the bottom of each topic page, only on mobile devices.
• Edit the transformation scenario and choose your customized publishing template using the "Choose Custom Publishing Template" link.

Please note that you may need to also use a custom CSS to style the newly added element. For example, to keep it always visible at the bottom of the page, you can use the following CSS:

Code: Select all

#custom_nav{

    position: fixed;

    bottom: 0px;

    display: block;

    width: 100vw;

    background-color: #000;

    opacity: 0.5;

}

To use a custom CSS in the WebHelp Responsive transformation scenario, please check the instructions from our user guide:
https://www.oxygenxml.com/doc/versions/ ... aid-title5

Regards,
Ionela

[sparklies2]

Thank you very much, that has indeed fixed the problem - and thank you for raising it as an issue as it does seem odd to have navigation disabled on mobile devices.

The fix has also made me aware of how to customise the template, which will come in very handy!