Display sidebar in mobile view

In ClickHelp, the Table of Contents and the right sidebar are hidden when the browser viewport width is not enough to display them. One such case is the mobile view.

The right sidebar includes navigation elements similar to those you can add to the topic content — e.g. See also, Breadcrumb, Mini-TOC. 

Since the sidebar is hidden in the mobile view, you can add the necessary navigation element markup to the Topic Master Page settings to display that element in the mobile view as a part of the topic content either before or after the contnet:

  1. Open the project style file and add the following rule to it:
    Copy Code
    CSS
    .mobile-sidebar-element
    {
      display:none;
    }
    .mobileView .mobile-sidebar-element
    {
      display:block;
    }
  2. Go to the Master Page settings and paste the HTML markup of the necessary navigation elements to the Topic header HTML/Topic footer HTML field and add the following CSS class to each of them: .mobile-sidebar-element.

This CSS will make those elements be displayed when the .mobileView CSS class is applied to the <html> element of the page, which happens when the Reader UI is displayed in the mobile view.

© ClickHelp. All rights reserved.
Didn't find what you're looking for? Let us know what you need!

The information and examples in this Knowledge Base are presented "as is" and for informational purposes only — we do not provide Technical Support for it. Neither can we guarantee that the examples provided will work as intended in your particular scenario, nor do we provide assistance in customizing these examples to fit your use case.