Change the Width When the Table of Contents Collapses

By default, KnowledgeOwl uses CSS media queries to toggle when the table of contents in the right column collapses and when it is fully shown. These rules are written based off standard screens such as computer monitors, laptop screens, iPads, and smart phones. If you would like to override these default settings, you can take the following steps to do so.

In this example we are going to pretend that we have an iPad screen for which we don't want to collapse the table of contents.

  1. Open up a browser on your iPad (or other device).
  2. Go to a site like http://whatsmy.browsersize.com/ to find your device's window width. You will want to choose a width less than the size of your iPad to prevent it from collapsing. In this example, we want something less than 843px. Let's choose 840px.
  3. Go to Settings > Style in KnowledgeOwl.
  4. Scroll down to the Custom CSS section.
  5. Paste the following code into Custom CSS
    /* show toc until 840px screen width */
    @media (min-width: 840px) {
      .hg-site .documentation-categories {
        height: 100% !important;
        display: block !important;
        margin-bottom: 20;
        min-height: 100%;
        position: fixed;
        width: 33.3333%;
        overflow-y: auto;
        z-index: 2;
        border-right: 1px solid #C5C5C5;
      }
    }
    /* toggle toc at screen width less than 840px */
    @media (max-width: 839px) {
      .hg-site .documentation-categories {
        min-height: 0;
      }
    }
    /* toc needs less room on very large screens */
    @media (min-width: 1200px) {
      .hg-site .documentation-categories {
        width: 25%;
      }
    }
    /* give toc room at 840px screen width and up */
    @media (min-width: 840px) {
      .hg-site-body .documentation-article {
      	margin-left: 33.3333%;
      }
    }
    /* large screens do not need as much room for toc */
    @media (min-width: 1200px) {
      .hg-site-body .documentation-article {
        margin-left: 25%;
      }
    }
    /* override when to show toc toggle button */
    @media (max-width: 991px) {
      body .toc-toggle {
        display: none;
      }
    }
    /* show toc toggle button at less than 840px screen width */
    @media (max-width: 839px) {
      body .toc-toggle {
        display: block;
      }
    }
    /* override extra padding given to body for toc toggle button */
    @media (max-width: 991px) {
      .hg-site-body {
        padding-top: 7em;
      }
    }
    /* new width to add padding for toc toggle button */
    @media (max-width: 839px) {
      .hg-site-body {
        padding-top: 10em;
      }
    }
    /* very small screens do not need the padding here */
    @media (max-width: 767px) {
      .hg-site-body {
        padding-top: 0;
      }
    }
  6. Replace all "840px" with your desired width from Step 1. 
  7. Replace all "839px" with your desired width minus 1.
  8. Click Save and you should be ready to go!