Community forum for knowledge and support

Updated last year

Header 75 interaction issue

At a glance

A community member is having an issue with the Header 75 component on their Webflow site. The interaction works fine in the preview, but not on the published site. The community members provide links to the preview and published site, and discuss potential solutions, such as adding more space under the section and checking the custom code that may be causing the issue. The root cause is identified as the custom code targeting the "grained" ID, which is adding "overflow: hidden;" to the page wrapper and preventing the "position: sticky;" from working properly. The community member is advised to find a way around this issue or use a different library like particles.js.

Useful resources

Hi guys, I've encountered an issue while using Header 75. Everything looks fine in the webflow preview but in the published site the interaction seems to not be working.

Any advice on how to fix this? Thanks!

Link to the project here.

M
J
10 comments

that link to your read-only didn't work for me.

you're going to need more space under this section. I guess even if its blank. I don't think this section was intended on being the only section on the page.

Can you also send along the published URL, since you had mentioned it was fine in preview but not on the published site. Thanks!

gotcha, here's the link to the published site. Thanks!

Hi guys, wondering if you were able to identify the issue here? thanks!

I'm not seeing header 75 - can you point me to the right page?

Hi Matt, it's called 'header_component' on the homepage, let me know if that's helpful

Hi guys, guessing you haven't had a chance to check this out yet - would really appreciate it as we are almost ready to go live with this site πŸ™

apologies for the delay here. The reason this is breaking on the published site is because of the custom code that you've added targetting the id "grained" - this custom code is adding "overflow: hidden;" to the page wrapper - which prevents position: sticky; from working properly.

I would see if there is any options to make this not have overflow hidden or use a different library for this effect like particles.js possibly.

Thanks Matt! Will look if I can find a way around it πŸ™

Add a reply
Sign up and join the conversation on Slack