Just a quick post to draw attention to two code snippets I have created specifically for the Avada Table of Contents (TOC) element. Both can be experienced in this post.

Scroll Offset

The first snippet, a scroll offset, is CSS to move the viewport above the heading when a TOC item is clicked. I suspect this was an oversight on the part of the team and will be added in the future. The snippet is easy to adjust based on your design needs.

Active Border

The second snippet, a left border indicator, is based on a pattern I have seen used in many Tables of Contents I have encountered on the web. Like the offset, I suspect this will be added to the element settings in the future. This creates a faux border to the left and then changes the border color when the article is scrolled to that header. This only looks good on a single-level table of contents and is only of value if it is in a sticky column.

Originally published on April 1, 2023

In this story

Tro of musicians - two accordions and an upright bass.Customizing Post Pagination
Using Font Awesome Sharp Icons

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.