Print

Table of contents ( TOC )

The table of contents ( TOC ) is a list of article headings that your readers can easily navigate to skip part of the article and find what they need fast.

Features:

  • The TOC list is generated automatically.
  • The generated list is based on headings in the article: H1 - H6 or H2 - H3, for example.
  • When a reader clicks on the TOC headings, it will scroll the page down to that specific heading.
  • The TOC is sticky, ie., it follows the reader down the page. As the reader scrolls up or down, so will the TOC.
article table of content
Where do I Find TOC settings?

Follow the instructions below.

Go to instructions
How do I Turn ON the TOC?

Follow the instructions below. 

Go to instructions
How do I Switch the TOC Location?

For Left or Right sidebar, scroll positions, border, the header range.

Go to instructions
I Want to Exclude Certain Headings from TOC.

Follow the instructions below.

Go to instructions
How do I Change the TOC Text?

Follow instructions below.

Go to instructions
How do I Change the TOC Colors?

Follow instructions below.

Go to instructions
My TOC is not Sticky.

For the solution to this issue, follow the instructions below.

Go to instructions
TOC Navigation - Right Sidebar Settings
  • Click on the Navigation button

  • Click on the TOC Link

    Note: If you have the TOC active in the left sidebar you will see it under the left sidebar in the navigation. 

  • Or, simply click on the TOC to load its settings.

Open the KB Editor.

Turning on TOC
  • Click on the Navigation button

  • Click on the Disabled Sections tab

  • Turn on the TOC

Open the KB Editor.

TOC Setting - Content Tab
  • Click on the Content tab

  • Change the TOC Title.

Open the KB Editor, and click on the TOC to load the settings for it.

TOC Setting - Style Tab
  • Click on the Style tab

  • TOC Title Colors

    1. Typography: Change the font size, font-weight, and font family
    2. Title: Color of the text
    3. Container Background:  Background behind the title.
    4. Border: The border around the whole TOC.
  • TOC Headings are the headings generated based on the page. 

    1. Typography: Change the font size, font-weight, and font family
    2. Headings: Color of the text, for all headings.
    3. Active Background:  The active background color for the heading.
    4. Active Heading: The active text color.
    5. Hover: Background: The mouse hover background color.
    6. Hover Text: The mouse hover text color

Open the KB Editor, click on the TOC to load the settings for it.

TOC Setting - Features Tab
  • Click on the Features tab

  • Display on the Left: This displays the TOC on the left sidebar. The number value will set its priority on the left sidebar; the lower the number, the lower down the sidebar it is positioned.

  • Display Above the Article: Use this if you want the TOC above the article content in the middle of the page. 

  • Display on the Right: This displays the TOC on the right sidebar. The number value will set its priority on the right sidebar; the lower the number, the lower down the sidebar it is positioned.

  • Border Style: This is the option to have a border between the article and the TOC or all the way around the TOC.

  • Header Range: The header Range is the range of headings the TOC will display, for example h2 – h6.

    • From Hx: The starting point in this example is the value 2, so H2 headings will be included in the TOC. To learn more about web headings click here.
    • To Hy: The end of the range.
  • Heading position: This is the offset after the user clicks on the heading and the page scrolls to the heading. If the heading is not vertically aligned, that is, if the heading isn’t fully visible, adjust this value and add pixels to move it down further. 

Open the KB Editor, and click on the TOC to load the settings for it.

TOC Setting - Advanced Tab
  • Click on the Advanced Tab

  • CSS Class to exclude headers from the TOC: to exclude certain headings from the TOC, assign a CSS class to the heading and enter that value into this box.

  • Container Width: this sets the overall TOC width. The desktop value is the width on desktop screens. Tablet value is the width on tablet screen sizes.

  • Starting Resolutions for Widths: These are the resolution sizes that are triggered for certain screen sizes.

Open the KB Editor, and click on the TOC to load the settings for it.

My TOC is Not Sticky and Disappears if I Scroll Down

This issue is caused by your active WordPress theme. The theme has applied an overflow property somewhere on the page, which stops the TOC from scrolling. There are two different solutions:

a) If you have no web developer, contact us for help.

b) If you do have a web developer, show them the code below and they can find the proper location to apply this CSS.

CSS
/*
 The .container class needs to be change to the container class of your active themes classes. It could be even the HTML Tag or BODY Tag.
*/
.container {
    overflow: initial !important;
}
About this Article

This article's heading and Hotspots are built with our Creative Addons plugin.

Get free Creative Addons for articles
Was this article helpful?
4.5 out Of 5 Stars
5 Stars 0%
4 Stars 100%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?
Previous Placement of Top Features
Next Previous / Next Page Navigation
Table of Contents

Recent Articles