Sridhar Katakam

Genesis and WordPress Tutorials

How to make last widget in the sidebar sticky on scroll in Foodie Pro

by 4 Comments

Updated on December 04, 2017

In my Facebook group a user asked:

I'm trying to use your tutorial on making things sticky with sticky kit to make just the last widget on my sidebar sticky. (An ad unit.) I tried using the suggested non-handheld.js for the sidebar on just the css selector for the text widget instead of .sidebar-primary, but it's not working for me. It does work to stick the whole sidebar if I implement it exactly as your tutorial. Am I missing something? Do you have a tutorial for making just the last widget sticky? (I'm using FoodiePro if that matters.) Thanks for all your awesome tutorials!

In this article I show how we can use Sticky-Kit JS to make the last widget in Primary sidebar become sticky using CSS alone (without any Javascript) so it continues to remain in view when it's scrolled to in Foodie Pro.

While the tutorial has been written for Foodie Pro child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Edit style.css.

1) Add the following above the media queries:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hello. For the latest version of Foodie Pro, I had to move it to /js/.

    However, for a taller sidebar with more widgets it bleeds into the footer 🙁 any ideas?

    Reply

    • Hello.

      Apparently, JS is not needed anymore for this functionality. Remove the steps from this tutorial and follow this instead:

      1) Add the following above the media queries in style.css:

      @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: 37px;
    }

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

}

      2) In 1200px media query, add

      .site-inner {
    overflow: visible;
}

      below

      .site-inner,
.wrap {
    max-width: 1040px;
    overflow: hidden;
}
      Reply
    • >