Sridhar Katakam

Genesis and WordPress Tutorials

How to set up a Sticky widget in Genesis

by 30 Comments

Did you know that it is possible to make any element sticky or fixed as it is scrolled to and have it “bottom out” so it never leaves its container (no more worrying about accidentally covering the footer) using CSS alone?

Thanks to Tim Jensen, today I learned about position: sticky which is quite powerful and easy. Bye bye Sticky-Kit.

Watch this 10-min screencast to learn how to arrive at the CSS:

While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme.

Add the following in child theme’s style.css above the media queries:

@media only screen and (min-width: 1024px) {

    .content-sidebar-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .sidebar-primary .widget:last-child {
        position: -webkit-sticky;
        position: sticky;
        top: 40px;
    }

    .admin-bar .sidebar-primary .widget:last-child {
        top: 72px;
    }

}

to make the last widget in the Primary sidebar sticky.

Foodie Pro specific instructions can be found here.

  • Outstanding tutorial, Sridhar!

    Extremely clear presentation. As a novice, I found it very helpful. Thanks so much!

    The only correction I would make is that setting “display: flex;” for a 1024px screen placed my primary sidebar on the right side on narrower screens — like my smartphone. So, I added the following code for smaller screens 800px width and below:

    @media only screen and (max-width: 800px) {
    .content-sidebar-wrap {
    flex-direction: column;
    }
    }

    That did the trick!

    Just to give readers another example, check out my webpage that’s under construction: http://fengshuimaidservice.com/bronxville-ny/. My desktop version uses the above tutorial to make the last sidebar widget sticky while my mobile version has a (sticky) menu with which I’m having some difficulty integrating in my child theme.

    Anyway.

    Again, thanks!

    Reply

  • hmm i do it right in ur description but the sidebar ist not sticky … put the code into the dynamik website builder css.

    Reply

  • Hi there,

    thanks – works perfect for me. But unfortunately I wanted to place the sidebar on the left side. With your CSS code the sidebar is on the right side. Do you have solution?

    Thanks alot & best regards,
    Jannik

    Reply

  • Great Tutorial,

    I tried using the exact same code inside magazine pro style.css, but nothing has changed.
    Do you care to help me with this hurdle as I can’t figure it out myself

    Thanks,

    Reply

    • @media only screen and (min-width: 1024px) {

      .content-sidebar-wrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      }

      .sidebar-primary .widget:last-child {
      position: -webkit-sticky;
      position: sticky;
      top: 64px;
      }

      .admin-bar .sidebar-primary .widget:last-child {
      top: 96px;
      }

      }

      is working fine on https://demo.studiopress.com/magazine/.

      Reply

    • For this method to work, none of the parents should have overflow: hidden. In your site’s case looks like it is present for .site-container-wrap. Can you comment that rule out and check?

      Reply

    • Where is that error shown? If it’s in the WordPress editor at Appearance > Editor, you can safely ignore it.

      Just checked your site and the sticky functionality is working fine for the last widget.

      Reply

    • Hello Matthew,

      You can change the layout either globally in Genesis theme settings or just for that individual Page to sidebar-content. Currently, it is contennt-sidebar.

      Reply

      • Hello Sridhar,

        I got in on the left side now… but no longer sticky =)

        I must have messed something up in CSS. I’ll look again.

        Thank you again for the snippet though – I appreciate you helping a Genesis newbie!

        Have a great night!

        Matt

        Reply

  • Thank you for this. This is what I needed. Less plugin. Implemented on my site using Genesis Magazine Pro theme. I just need to adjust the top: 40px; to top: 90px; since magazine pro has fix header.

    Reply
    • >