---
title: "How to Make a Sticky Table of Contents in Elementor?"
url: https://theplusaddons.com/docs/make-a-sticky-table-of-contents-in-elementor/
date: 2025-01-11
modified: 2026-08-13
lang: en
author: "Aditya Sharma"
description: "Do you want to create a sticky table of contents in Elementor? A table of contents helps visitors navigate long pages without scrolling back to the top. A sticky table..."
word_count: 400
---

# How to Make a Sticky Table of Contents in Elementor?

## 

- The Table Of Content widget in The Plus Addons for Elementor includes a Fixed toggle in the Extra Options tab that pins the table of contents to a set position as the user scrolls.
- The Layout tab lets editors choose the style and heading tags, so pages with mixed H2 and H3 headings can show only top-level sections in the table of contents.
- The Fixed Offset section sets a top offset value for each responsive device, which helps the sticky table of contents avoid overlapping a sticky header on smaller screens.

Do you want to create a sticky table of contents in Elementor? A table of contents helps visitors navigate long pages without scrolling back to the top. A sticky table of contents stays visible as users scroll, so they can jump to any section at any point on the page.

The Table Of Content widget in The Plus Addons for Elementor includes a Fixed toggle that pins the table to a set position on the screen as the user scrolls. You can find this setting in the Extra Options tab.

*To check the complete feature overview documentation of The Plus Addons for Elementor Table Of Content widget, [click here](https://theplusaddons.com/docs/add-a-table-of-contents-in-elementor/).*

**Best Used For:**

- Long-form blog posts and tutorials where readers need to jump between sections- Documentation pages and knowledge bases with multiple topics on one page- Landing pages with detailed feature breakdowns or side-by-side comparisons

**Requirement** – This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-table-of-contents/)

To make a sticky table of contents in Elementor, add a two-column section to your page. In one column, place your content with headings. In the other column, add the Table Of Content widget. Then follow these steps:

1. Select the appropriate style and heading tags from the **Layout** tab. The heading tag settings control which HTML heading levels appear in the table of contents. Use this when your page mixes H2 and H3 headings and you want to show only top-level sections. If you also want visitors to jump to a section by clicking a button anywhere on the page, see [How to Scroll to a Page Section on Button Click in Elementor](https://theplusaddons.com/docs/scroll-to-page-section-button-click/).

2. Enable the **Fixed** toggle from the **Extra Options** tab to pin the table of contents to the screen as the user scrolls.

![](https://theplusaddons.com/wp-content/uploads/2025/01/table-of-content-fixed.png)

In the **Fixed Offset** section, set a top offset value for each responsive device. This value controls the number of pixels from the top of the viewport where the table of contents sticks as the user scrolls. Use this when your page has a sticky header, so the table of contents does not overlap it on smaller screens.

Your table of contents will now stay visible as visitors scroll down the page. You can pair the sticky table of contents with [Sticky Social Icons in Elementor](https://theplusaddons.com/docs/add-sticky-social-icons-in-elementor/) to give visitors another persistent navigation element alongside the table of contents.