nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Floating TOC in the right column

Corti Corti

Hi all,

I have a page with a two columns layout and I put a TOC on the right one. I would like to have the TOC always visible even though when I do scroll down. Is there any nice macro solution for this?

I get some results via CSS, setting a name for the div of the TOC and adding some CSS code like

.fixedPosition {

max-width:370px;

margin: 0 auto;

position: fixed;

top: 200px;

}

any better option?

Many thanks.

Accepted answers

Milo Test

@Davin Studer has your solution:

https://answers.atlassian.com/questions/285311

Michelle Rau HP

Thanks for this! I got decent results via CSS like this. It's a simple, half-transparent light gray box with a thin blue border that stays visible at the top right of the screen.

.toc-btf {
    float: right;
    position: fixed;
    width: 300px;
    right: 0px;
    top: 170px;
    background: rgba(229, 232, 232, 0.5);
    border: 1px solid #0096d6;
    padding: 5px;
}

This worked best when I put the TOC with the toc-btf class as the very first thing on the page.

The only annoyance is that other Confluence macros / page parts overlap the TOC in a distracting way. This is minor, but I would rather have the Note's yellow box be under, not over the TOC. If there is an adjustment I can make to CSS please tell me.

I'm a space admin, not a Confluence admin, so my options are limited. I did see the linked solutions above but they're not an option for me.

All comments

Milo Test

@Davin Studer has your solution:

https://answers.atlassian.com/questions/285311

Michelle Rau HP

Thanks for this! I got decent results via CSS like this. It's a simple, half-transparent light gray box with a thin blue border that stays visible at the top right of the screen.

.toc-btf {
    float: right;
    position: fixed;
    width: 300px;
    right: 0px;
    top: 170px;
    background: rgba(229, 232, 232, 0.5);
    border: 1px solid #0096d6;
    padding: 5px;
}

This worked best when I put the TOC with the toc-btf class as the very first thing on the page.

I'm a space admin, not a Confluence admin, so my options are limited. I did see the linked solutions above but they're not an option for me.

hmohapatra

I use this css in a two column page layout, for a floating scrollable TOC on the right side.The two column page does not let the content overlap with TOC.

Screenshot:

CSS:

.rightFloat {
 position: fixed; 
 height: 600px; 
 overflow: auto;
 top: 100px;
}

Michelle Rau HP

I'll try that out. Thanks much!

Zdeněk Šedivý

Hi,

What is the macro that you've got the ccs stylesheet on the page?

In Other Macros, there is no such thing.

Thank you.

hmohapatra

Name of the macro is CSS Stylesheet.

Zdeněk Šedivý

Hello,
I have a solution for your problem. Just move the macro with CSS style to the end of the page so that all the other macros used on the page are above CSS style. See picture.

Michelle Rau HP

That worked! Thank you!

wld-PKumbhare

I got the TOC to float/sticky, thanks to the wonderful suggestions in this thread, but it only works in the preview mode, when I publish the page the TOC loses it's floating/sticky property. Has anyone faced this issue or am I missing something?

Mike MacDonald_vz7vc0

I am having this same issue. Has something changed due to an Atlassian update?

Kem McFadden

Same issue here. Works in Preview but not in Published mode.

Krishnanand Nayak_xsol8v

This solution worked for us.

Dan Towler

Yep - exactly the same issue here - using the Cloud version.

Ie. sticks perfectly in PREVIEW but scrolls once Published.

Has anyone found a fix to this one?

Michael Yang - Shinetech Software

The floating table of content free plugin has just been released: https://marketplace.atlassian.com/1221271

Puvaneswary S

This is only for Server and data Center not Cloud

Anh Nguyen_k54b9y

Great. Thanks,

Sidhartha Kumar Sharma

Thanks for the great suggestions in this thread.

Is there a way to ensure that the floating ToC do not float over the footer section or the comments section? When it sticks beyond the actual content layout, it overlaps with the comments posted on the specific page.

ncline-va

Would be great to make it available for Cloud

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

css

table-of-contents