Table of contents: style current page entry

support
1

Hi,
I’m using {{TableOfContent}} to create a table of contents.
I can style the elements this way:

#TableOfContents > ul > li > a {
   display: flex; 
   cursor: pointer;
   padding: 10px 0; 
   align-items: center;
   text-decoration: none;
   width: 200px;
   color: black;
}

However, how to highlight the current menu entry selected?
Thanks

2

Do you have a quick sample available? I am not using this, nobody else answered :wink: I would look at your example and check the resulting markup and tell you if there is any indicator for the currently active item.

But I am afraid there won’t be any, because it’s AFTER the page loaded that you click the TOC item and end up on the corresponding item on the page.

I would expect something like #TableOfContents > ul > li > a:active to work, but no guarantee.

1 Like
3

@davidsneighbour Just put {{TableOfContent}} in a partial file (e.g. “side.html”).
This will generate something like:

 <nav id="TableOfContents">
   <ul>
     <li>
       <a href="#overview">Overview</a>
    </li>
  </ul>
</nav>

Which is difficult to style, because there is not classes or ids.

4

Did you try #TableOfContents > ul > li > a:active? The link should be active if it’s clicked. This might not work with directly loading the page though…