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

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

Home Forums Support How to make left or right sidebars Sticky which contain TOC

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2074701
    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

    #2074758
    Elvin
    Staff
    Customer Support

    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. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2074838
    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

    #2074903
    Elvin
    Staff
    Customer Support

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

    And the guide itself should work as is w/ all the CSS selectors. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2077865
    Ema

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

    Best

    #2078589
    Elvin
    Staff
    Customer Support

    No problem. Let us know how it goes.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.