[Resolved] Sticky sidebar

Home Forums Support [Resolved] Sticky sidebar

Home Forums Support Sticky sidebar

  • This topic has 7 replies, 4 voices, and was last updated 2 months ago by Fernando.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2247030
    Scott

    Hi

    I’m using the below CSS I found in another support thread to try and make my sidebar widgets sticky but it isn’t working.

    /* Stick last widgets in sidebars */
    @media(min-width: 769px) {
        .inside-right-sidebar,
        .inside-left-sidebar {
            height: 100%;
        }
        .inside-right-sidebar .widget:last-child,
        .inside-left-sidebar .widget:last-child {
            position: -webkit-sticky;
            position: sticky;
            top: 60px;
        }
    }

    Any ideas?

    #2247067
    David
    Staff
    Customer Support

    Hi there,

    if you want the entire sidebar to be sticky then add this CSS:

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

    Make sure to clear the SG Optimizer cache if it doesn’t work first time.

    #2247738
    Scott

    Hi David

    Thanks for the reply.

    Sorry, I wasn’t clear. I would like to have the last widget as sticky.

    Regardless, I’ve added the code you provided but can’t get it to work for me.
    (Have cleared SG Optimizer cache and flushed cache in SG)

    #2247752
    Ying
    Staff
    Customer Support

    Hi Scott,

    Can you try adding David’s code to the top of the CSS field?

    #2247768
    Scott

    Hi Ying

    That worked thanks – why would that be the case?

    Also, how can I switch this so only the last widget is sticky? (not the table of contents)

    #2247782
    Fernando
    Customer Support

    Hi Scott,

    With regards to the code not working previously, it may be a syntax error usually an extra or missing }. This will cause other code not to work.

    Now, with regards to the last widget being sticky if that’s the case, can you try this CSS instead?:

    @media(min-width: 769px) {
        .inside-right-sidebar, .inside-left-sidebar {
            height:100%;
        }
    
        .inside-right-sidebar .widget:last-of-type, .inside-left-sidebar .widget:last-of-type {
            position: sticky;
            top: 60px;
        }
    }

    I replaced :last-child with :last-of-type which is the more appropriate pseudo-class.

    Kindly let us know how it goes.

    #2247793
    Scott

    That works, thanks!

    #2247798
    Fernando
    Customer Support

    You’re welcome Scott!

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