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
