FixIt Theme - How to place Table of Contents to the Left Side?

Using Themes
1

Am new to Hugo and am trying to place the Table of Contents from the right hand side to the left hand side…

Using: hugo v0.128.2 and the FixIt theme.

mysite
|
---layouts (copied this from the /themes/Fixit/layouts folder)
   |
   --- posts
       |
       --- single.html

Here’s the original source for single.html:

hugo.toml:

[markup]
[markup.tableOfContents]
ordered = false
startLevel = 1
endLevel = 6

Am very new to HTML & Hugo and just want the Table of Contents moved to the left without altering the rendering on other devices (e.g. iOS, Android, etc) which renders it to the top of the post.

Is there an easy way to accomplish this so it renders the Table of the Contents to the left while viewing in a browser running in desktop or laptop?

2

That’s most probably a CSS issue. Have a look at the generated HTML in your browser’s developer tools and add/modify the CSS so that the TOC is moved to wherever you want it.

As you apparently want the TOC to be rendered at different positions on desktop and mobile, you’d have to use the correct @media queries in your CSS to do so.

None of this is in any way related to Hugo – it’s pure CSS and HTML. Perhaps the author of the theme can help you out.

3

According to the docs there’s an option. Dunno if that’s working, for all pages, all screen sizes…

[params.page.toc]
      # whether to enable the table of the contents
      enable = true
      # whether to keep the static table of the contents in front of the post
      keepStatic = false
      # whether to make the table of the contents in the sidebar automatically collapsed
      auto = true
      # FixIt 0.2.13 | NEW position of TOC ["left", "right"]
      position = "right"
    # FixIt 0.2.13 | NEW Display a message

If this does not fit. I’m with @chrillek and it might be best to ask at their github discussions

4

This worked like a charm! Copied and pasted the entire code snippet and changed:

position = "right"

to:

position = "left"

Thank you @irkode & @chrillek !! This was so easy!