Highlight Function Not Working

You can check all other blog posts, and also other pages. The highlight function does not work throughout whole entire site.

The following script seems to prevent the active highlighting after a TOC item is clicked in the widget; it will work before a TOC link is clicked.

• [REDACTED]/wp-content/plugins/page-scroll-to-id/js/page-scroll-to-id.min.js?ver=1.7.2

My guess is since both use the scroll event to function, and this script is overriding the ezTOC script.

Thanks Steven for your kind reply! sorry for late reply due to festive season here in Singapore…
If I do need both plugins… how can I stop this conflict?
Eg. Easy TOC doesn’t allow smooth scroll + Offset function for anchor links from one page to another page!

Sorry, I do not know how to make both work together.

I found the solution and just added two css classes to be deselected and not ran by the script.
the 2 classes are
.ez-toc-list a.ez-toc-link

this case is resolved. many thanks and hope this helps others too facing the problem.

one issue i noticed with easy TOC – is that when too many table of contents (eg H2 H3 H4), the side bar widget gets too long. this problem exists when one uses the easy toc as sidebar widget and fixed widget. the contents below can only be seen when scrolled all the way down to the page.

I have reduced font size… but i fiddled with the css classes and css edit including line-height, display (inline vs block), and even the absolute height, I only managed to shrink the entire table of contents on the sidebar by setting fixed height and reducing font size.

do you know why does line-height not work? (even after adding !important). Because the spacing between each “bullet (ordered or unordered list)” point in the sidebar easy TOC is quite huge. was really wishing to reduce that space to enable the blog readers to see all the contents of the easy TOC more easily in viewport.

Some of the height is set by the theme’s styles.css. It is add padding:

.widget ul li li {
	border: 0;
	padding: 6px 0 6px 1.5rem;
}

You could add some custom CSS to override this theme style.

Additional height is also being applied by custom CSS:

.ez-toc-list ul li {
    display: block;
    height: 1.88em;
    margin-right: 20px;
    font-size: 13px;
}

You can reduce the height attribute.

Sorry for the late reply! Thanks for the response.
The custom CSS was added by myself personally, to help mitigate the problem.
But the problem is still there because when I reduce the height, parts of the text get CUT OFF (eg if the heading2/3/4 are too long).
I managed to get around that problem by omitting the height totally and just adjusting padding, as per your suggestion, to .widget ul li and also to .widget ul li li

However now my other widgets – as seen here in the FOOTER REGION : https://meide.sg/what/
They are being shrunken also… which I do not want.
I cannot seem to identify the correct CSS class or ID to adjust the padding directly for the ul li and ul li li… for easy TOC… Can help?