Can't make an element sticky

Hey,

I’ve been struggling with this! Perhaps I’ll be able to figure this out with my morning brain tomorrow. But I’m going to have to give it a rest tonight. I’ll report back tomorrow, I need to get to the bottom of it for personal pride 🙂

Cheers,
Sebastian

Hey Tom,

I’ve been checking this at the airport but my flight is boarding now so I’m going to have to dash. It seems there are some caveats when applying position: sticky outlined in this stack overflow post: https://stackoverflow.com/questions/43707076/position-sticky-not-working-css-and-html

I’ve been looking for display: flex and overflow settings on parent elements on your site but haven’t found them yet. Perhaps the info in the link will help. I will resume after flight!

Hi Tom,

This is a sticky situation! I still don’t know exactly why it’s not working on your site. Would the following workaround be any good to you?

On your social selector, instead of using sticky set position: fixed;

.sticky-social {
    position: fixed;
    top: 80px;
}

And to ensure the icons don’t overlap with the header create the following selector/styles:

.fl-node-5bf41e1663beb {
    position: relative;
    z-index: 1;
}

You can manually add custom selectors by hovering over a folder in the selectors menu at the top left of the interface. Click the (+) icon and then enter your custom selector (.fl-node-5bf41e1663beb) and give it a label. Then set position:relative and z-index: 1. This will ensure the header image appears in front of the social icons.

Cheers!
Sebastian

Update, I found overflow:hidden set on the root HTML element on your page. But disabling that didn’t make your sticky work, so it must be something else at play too.

For other readers struggling with position: sticky

I discovered a trick for finding an ancestor that doesn’t have overflow:visible, which means it has overflow set to hidden, auto, scroll.

This will work if you are running jQuery on your site, which most WordPress sites are.
In chrome, right-click your page anywhere and choose Inspect.
Go to the console tab and paste the following code, replacing ‘.sticky-social‘ for a selector which targets the sticky element.

jQuery('.sticky-social').parents().filter(function() {
    console.log(jQuery(this));
    console.log(jQuery(this).css('overflow'));
    return jQuery(this).css('overflow') === 'hidden';
});

Hit enter to run the code.
It will log the the overflow setting of all ancestor elements. Find one that says hidden and override the overflow style for that element.

Cheers,
Sebastian

Excellent. That’s a much more satisfying conclusion. Well done!

Sebastian