Customizing the Menu

By default, the menu component is displayed in all WebHelp Responsive pages. However, for some reasons you might want to hide it completely, or, display only some of its menu entries.

Hiding Some Menu Entries

Editing the DITA map

  1. Open the DITA map in the Text mode of Oxygen XML Editor.
  2. Add the following metadata information in the topicref element (or any of its specializations) for each topic you do not want to be displayed in the menu:
    <topicmeta>
  <data name="wh-menu">
    <data name="hide" value="yes"/>        
  </data>
</topicmeta>

Customizing the CSS

To hide some of the menu entries:
  1. Make sure you set an id to the topic for which you do not want to have a menu entry. For the purpose of this procedure, we suppose that the id you set to a topic has the value growing-flowers.
  2. Create a new CSS file that contains a rule that hides the menu entry generated for our topic (identified by the topic id growing-flowers). The CSS file has the following content:
    .wh_top_menu *[data-id='growing-flowers'] {
  display:none;
}
  3. Use the Customizing WebHelp Output with a Custom CSS method to pass the CSS file you just created to the transformation scenario.

Hiding the Entire Menu

If you do not need to include a main menu in the pages of the WebHelp Responsive output, you can instruct the transformation scenario to skip the menu generation completely. Follow this procedure:
  1. Edit a WebHelp Responsive transformation scenario.
  2. Open the Templates tab and choose a skin that suits you best.
  3. Open the Parameters tab and set the value of the webhelp.show.top.menu parameter to no.
  4. Click OK, then click the Apply associated button to execute the transformation scenario.