How to set up a Sticky widget in Genesis

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.

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:

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.

Great tutorial. I am not too familiar with Genesis so I am learning as I go with this. How do I get this sticky menu on the left side of the page. The client test website is at https://tinyurl.com/ycf587oc