KPC
Kevin Powell - Community•2mo ago
unmizeria

Need help with ToC's indentation [Hugo]

Hello, everyone! How can I reduce the indentation of Table of Content? It's for a personal blog with Hugo engine. The primary goal is to move the indentation of the first level to align with ToC's title, while the second level is visibly indented. I want to keep using list just in case I need it in the future, so I'd like to avoid the option to turn it off (if it's even possible with just CSS). What I'd like to achieve is something like this. 
Contents
Level1
    Level2
    Level2
Level1
    Level2
Contents
Level1
    Level2
    Level2
Level1
    Level2
The default and what I tried to do (pics) are here: https://imgur.com/a/ULYQTFb What I tried to do (by following MDN docs): 1. Added list-style: none. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style But it just hid the disc. The indentation is still there. 2. Added margin-left: -1.5em. https://developer.mozilla.org/en-US/docs/Web/CSS/margin It's getting closer to what I want, but it also changed the indentation of the second level of ToC. 
.toc-content ul, .toc-content ol {
    list-style: none;
    margin-left: -1.5em;
}
.toc-content ul, .toc-content ol {
    list-style: none;
    margin-left: -1.5em;
}
Thank you for your time and help. Pardon the newbie question.
3 Replies
Ray
Ray•2mo ago
My guess is it's something to do with padding, but it's hard to tell without live code. Could you post a codepen that simulates the issue? It's more meaningful than screenshots.
Ganesh
Ganesh•2mo ago
Check the userstylesheet rules By default a list has some left-padding But yes posting the code would be better
Chris Bolson
Chris Bolson•2mo ago
Using the direct child selector > would probably work. This will remove the left margin on the initial ul element but not any nested ul elements that that might have: 
.toc-content > ul{
  margin-left: 0;
}
.toc-content > ul{
  margin-left: 0;
}

Did you find this page helpful?