By Stephen Walker
Share
I have seen some tables of contents around the web that use what appears as a left border, and the border color changes when highlighted. This feature is missing from the current version of Avada, so I created CSS styling to do this. It works best with a single-level list. Your color value will vary, and possibly the spacing values. This does require the highlight feature to be enabled. Item padding can be adjusted in the settings (I chose 12px on all sides), and margins are set to 0 to give the appearance of a continuous border. I have created a class (.toc- -border-left ) in case I want to use another style elsewhere.
UPDATE: My original version was more complicated, requiring pseudo-elements, and I am not sure why I didn’t try the simple approach first. This shows how simple it would be to implement, and I am surprised it was not a feature in the original version.
.toc--border-left .awb-toc-el__item-anchor{
border-left:3px var(--awb-color3) solid;
}
.toc--border-left .awb-toc-el__list-item.awb-toc-el__list-item--highlighted > .awb-toc-el__item-anchor{
border-left:3px var(--awb-color6) solid;
}
Originally published on March 31, 2023