[Resolved] How to make left or right sidebars Sticky which contain TOC

[Ema]

Hello, Happy New Year to you all GP!

I’m just in the early dev stages of this particular site. I’m looking to have a Table of Contents on some of my CPT which have long-form content.

I’d like the to be sticky similar to MC’s this example

I have added the code

@media (min-width: 769px) {
    #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

But couldn’t get it to stick
Thanks in advance

Ema

[Elvin]

Hi Ema,

I’m not exactly sure what TOC uses as its function to display the TOC on the sidebar but this PHP snippet can help.

add_action('wp_head', function(){
  if( function_exists('the_TOC_function') ){
    echo '<style>
    @media (min-width: 769px) {
      #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
      }
    }
    </style>';
  }
});

But you’ll have to replace the_TOC_function line of the code with what function TOC uses to output the table of contents. You can ask TOC’s support for this. 😀

[Ema]

Hi Elvin, Thank you so much for your reply and time. Very appreciated.

I’ve found this
tutorial – which is using GP theme too.

I am using Easy Table of Contents – but don’t think I need to use the Content-Aware plugin, as I am. making use of GPs Layout in Elements to only show a sidebar on certain posts.

EZ-Tocs docs say “To enable the option to affix or pin the Table of Contents widget enter the theme’s sidebar class or id.
Since every theme is different, this can not be determined automatically. If you are unsure how to find the sidebar’s class or id, please ask the theme’s support persons.
Eg: .widget-area or #sidebar”

I’m going to be popping it into the left-sidebar – which for GP is ‘#left-sidebar’?

The tutorial uses the following code
/*

This CSS code works for GeneratePress. You need to replace the class name of the sidebar with the class from your own theme

*/

.inside-right-sidebar {
    height: 100%;    /* Make sidebar the full-height */
}

aside.ez-toc {
    position: sticky;
    position: -webkit-sticky; /* Safari */
    top: 50px; /* Offset from top of container */
    
}

Would I replace
`aside.ez-toc’ with #left-sidebar?

Do you think I would still need a function?

Best Ema

[Elvin]

Ah there shouldn’t be any need for the function then.

And the guide itself should work as is w/ all the CSS selectors. 😀

[Ema]

Hi Elvin, thanks for getting back to me. Will be trying to implement this shortly! I will report back.

Best

[Elvin]

No problem. Let us know how it goes.

[Author]

Posts