Can't make an element sticky

This topic contains 14 replies, has 2 voices, and was last updated by  Sebastian 2 weeks, 3 days ago.

Author Posts

TomSchuller

Hi,
I just tried to make an element sticky. I watched one of the “Can it be done with Beaver Builder” videos and at first he had kind of the same problem. However, I just can’t get it to work. I want to make the social icons sticky so they can be seen when people scroll.

I recorded a short video showing my settings…
https://cl.ly/4e7487adbe2f

Hope anyone can help.

Thanks,
Tom


Sebastian

Hey Tom,

Thanks for sharing your video. The CSS looks right. I know MT’s validator has a warning, but it’s just got an out of date CSS property list. I will add the sticky value to the list soon.

Would you be able to send me a link to the page you’re working so I can inspect the CSS using Chrome’s inspector? My only thought at this stage is that the position property is being overridden by another style rule in your theme. And can I just confirm that the sidebar isn’t sticky inside MT either? You showed the frontend in the video, which can sometimes be out of date if a plugin cache needs to be purged.

Cheers,
Sebastian


TomSchuller

Hi Sebastian,

thanks for your reply.
Here is the link to the page…https://converts.at/blog/care-plan-spart-zeit-geld/
I hope you can help me 🙂

It’s the ASTRA Theme with Beaver Plugin and Beaver Themer in case that helps you any further.

Tom


TomSchuller

And regarding the sidebar being sticky … I didn’t “sticky” anything else.
I just tried with the social icons.


Sebastian

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


TomSchuller

I hope you had a good rest Sebastian 😀

Can’t wait to hear back from you 🙂


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!


TomSchuller

Thanks for the update Sebastian. I had a look at the link, but that is way too complicated for my current knowledge status. So I guess I have to wait for your answer.

Have a good flight 🙂


Sebastian

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


TomSchuller

Hi,

I just tried the code you proposed and it worked. I changed the item to appear after 4s so it is not coming out of the header when people scroll and also I only show it on large devices.

But isn’t it weird that this thing won’t work with sticky? I just tried to make something else sticky on a different page. No luck there either.

Astra & Beaver I thought wouldn’t be such a weird combination that things don’t work as supposed to 🙁
Seems I can’t use sticky on my site at all :/

Well thanks for your help Sebastian!

-Tom


TomSchuller

Just a short additional information … I tried to get things sticky on my other sites that rund on ASTRA & Beaver as well … no luck there either 🙁


Sebastian

I actually think it the sticky property value that is weird, as opposed to Astra or Beaver Builder. It requires the page setup to be quite particular in order to work. I found some more requirements for sticky to work on this thread: http://www.geekabyte.io/2014/03/when-css-position-sticky-doesnt-work.html

So all together, here are the requirements I’ve found mentioned online so far (unverified):

  1. You must specify one of these properties: top, right, bottom, or left
  2. Flexbox can be an issue.
  3. It will fail if an ancestor element (parent / grandparent etc) has overflow: hidden or overflow: auto
  4. Parent element must remain in view
  5. Ancestor cannot be a link element
  6. body must not have height:100%

I’ve been through all the ancestor elements on your site several times checking against the list of requirements but haven’t been able to pin down the cause or causes. Perhaps it’s due to another requirement mentioned in an article I’m yet to find…


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


TomSchuller

Hi Sebastian,

you won’t believe it. I just figured out how to make that element sticky after sleeping another night over it.

Turns out it was rather easy. I have the whole column the element was in a CSS class and then targeted the whole column to be sticky. And it worked!

Thanks so much for looking into that so deeply. So in case anybody else comes up with that problem at least now you know what to tell them.

Greetings,

Tom


Sebastian

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

Sebastian

You must login or register to reply to this topic.