I’m struggling with toc in my site these days because I ran into a triky problem Catalog in row expand into another row in Bootstrap grids.
Since I was not trained to write css, I couldn’t handle it myself. I turned to find some demoes explaining how to style toc in website, but I failed to. Instead, I found a lot of websites using different skills but implementing similar style.
There are examples using pure liquid to generate toc and using javascript to generate toc.
It’s not difficult to find a way to generate a toc, but what is hard for me is to write a proper css which satisfies my demands. My demands are quite common:
- Auto word wrap on long items
- Highlight current header
- Don’t folder children items
- Center the current header if possible
- Easy control on toc place (hover right or hover left)
- Only exsist in main article
These demands except the last one can be satisfied using solution offered by https://discuss.asciidoctor.org/Is-there-a-way-to-autoscroll-the-toc-from-the-content-in-HTML-tp4525p7339.html, but it is a Asciidoc way, it has it’s own css style which is hard for me to figure out.
The only problem with Asciidoc toc is that it expands into the whole screen rather than only keeps with main article. Minimal Mistakes’s post Layout: Post with Sticky Table of Contents does that very well.
What disturbs me most is that there are lots of plugins to generate toc but I fail to find any tutorials teaching you how to style a toc.
I think it’s easy to edit javascript code, but it’s hard to edit a css code, you never know what parent style it might rely on. For example, I tried to use Minimal Mistakes’s Jekyll theme toc in my site, I take hours to find out the toc’s style relys on more that 4 sass files. Disappointingly after I extract them out, the toc’s style is not what I want.
Therefore, I wonder is there any tutorial to style toc under my demands with as few css files as possbile?
The HTML markup you tend to find in table of content’s generated by Kramdown or Jekyll plugins tends to output as an ordered or unordered list. Styling these into navigation elements is a fairly common (and old) practice that you can find all sorts of resources on.
I don’t think you’re going to find a copy/paste solution or tutorial that fits exactly what you want. But with just CSS you can get 95% of the way there, and then use JavaScript if you need to do anything fancy like adding an active class using scrollspy, adding collapses, etc.
You’ll have better luck searching around for “styling lists with CSS” or poke around web dev/CSS related blogs and forums.
The basic idea is you:
- Remove padding/margin from the
ul or ol element… it wraps the list items.
- Reset the list style and remove the bullets or other marks using something like
li { list-style: none; }
- Style the links how you want them to look
- Add/remove indents to children elements using the descendent selector e.g.
li > ul { margin-left: 0; }
- Add active styles and any other bells and whistles… may need a better grasp of CSS in general and what can be achieved using
position: sticky for floating TOC’s, white-space to play with the wrapping of long words, etc etc etc.
These posts might be a good start:
2 Likes
Thank you for your help, those search keywords are more targeted than mine.
The theme I use implements 3 of them(2, 3, 5), what disturbs me most is the the last one Only exsist in main article. I saw somebody uses top to keep the toc class a distance from the <header>. I think you didn’t use that in your post Layout: Post with Sticky Table of Contents.
Here is the structure of my site
<header></header>
<article>
<div class="container">
<div class="row">
<!-- Side toc Container -->
<div class="col-lg-2 col-lg-offset-0
toc-container">
<div class="side-toc">
<h5 id="toc">
<a class="toc-toggle" href="#">TOC</a>
</h5>
</div>
</div>
<!-- Post Container -->
<div class="col-lg-8 col-lg-offset-0
post-container ">
</div>
</div>
</div>
</article>
<footer></footer>
I think it is similar with your site, but the toc-container in my site will expand to <footer>, what might be the problem?
Do you have a link to your site? It’s hard to tell what’s going on from just the HTML above.
Also, what I’m doing with the TOC in my MM theme has all sorts of hacky CSS stuff. I’m using negative margins to push and pull it around since I didn’t have the flexibility of placing it outside of the main container.
Thanks for your generousity, an example can be found here. The toc expands into the <footer>. The site’s source code can be found here.
The toc’s source code can be found here. function generateCatalog is used to generate the toc list. onePageNav is used to highlight current header. Toc’s css style can be found here.
Took a look at your site and don’t see where the TOC expands into the footer. Everything looks fine to me.
Thank you, I want the catalog stops at the green line, just like your site. But it expands to the red box where the footer lays.
I think I have some idea now, it is the fixed class that makes the catalog expand to footer. I think I need to judge whether it is near the end of page and remove that class. How do you implement that part?
It’s going to depend on how you structure your HTML. I have the TOC in a different div container, that when it has position: sticky applied it’s not running into the footer.
Don’t really have any suggestions. Have you tried Stackoverflow? This is more of a HTML/CSS thing and really has nothing to do with Jekyll.
Thanks ever so, I haven’t tried SO yet. I have tried to ask in Reddit, but didn’t get a result.
I know that might be unrelavant with Jekyll at first. Why I come here is that after struggling with it for many days and have no idea on how to search. I’m not sure if it is proper to ask this in SO and think here will have some people who are more experienced than me on that. After using toc as keywords to search in this site, I found here has some relavant topics. So I choose to post here.
You really helped me a great favor, giving me advice how to search and giving your suggestion how to implement my demands. More importantly, through our conversation, I realized what’s the key point blocking my design. That’s really a big step in these days.
