How to Create a Floating Column Using CSS position: sticky in Avada

floating-column-avada-README.md

Usage

1. Create your columns in Fustion Builder.
2. Select the column you want to be sticky.
3. Add floating-toc to the CSS Class setting for the column you selected.
4. Add the following CSS to the page's CSS editor.

/** Add this to your page's CSS */
.floating-toc {
  position: sticky;
  top: 171px; /* Offset for the header. Adjust as needed. */
}

See the screengrabs in the comment below this gist.

---

References

How to add CSS to WordPress

Live demo on CodePen

CSS position on MDN

---

Yes now it is working : first because I put the right url where this code should fonction. And second by verifying the css, I probably yesterday delete it from my custom css... It work well, the lesson was great, I learn a little bit about code.Thanks to share your kwowledge. Maybe I can hire you to do help me doing other things I can't achieve with plugin. I use modern event calendar but I am not satisfy by their design, I try few plugins to manage events but none of them let me free to achieve simple thing. I modify the original css  to make this page look lik eI wanted to.  But there is fews things I can't do. May I talk to you in private and is it allowed in this forum ?Thank for replying On Saturday, March 6, 2021, 11:18:27 PM GMT+1, mark l chaves <notifications@github.com> wrote: @marklchaves commented on this gist. Hello @zoudano, I just published a complete how-to article complete with code and screen captures. How to Unset CSS Overflow Using JavaScript when Sticky Elements Stop Working Hopefully, this will help you. Let me know if I missed anything ;-) Thanks! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Hello @zoudano,

Excellent! I'm glad it's working now :-)

Sure, I'd like to learn more about your projects to see how I can help.

Can you please send me a message via the contact form on my website? The link to my website is on my profile @marklchaves.

Have a great weekend :-)

Mark

Hi, That sollution does not work with me @marklchaves Could you please take a look at my code? Here is the test page: https://rekinfinansow.pl/rekin-finansow-bije-rekordy-popularnosci/

Hey @Wordpresslover,

Sorry for the delay. I just visited that page. I can see a sticky column on the right-hand side. It seems to work fine for me.

Let me know if you have any questions :-)

Thanks!

The class "position-sticky" with the information above worked as soon as I changed the parent div #boxed-wrapper from overflow:hidden to overflow:visible.

Hey @jolution,

Excellent! Thanks for sharing that with everybody :-)

Hello
I have the same problem. I installed the Avada theme and would like to add the sticky position to a column. I've tried all of the above solutions but none of them work.

The left graphic should stay when you scroll down.

You can see all the settings of the container and the column on the print screen.

What am I doing wrong?

Thank you very much for your feedback

@Paeddy85 no such built=in option in Avada. Avada has only sticky containers. For me Mark's css works:

1. add css to you specific page or globally if you use it in many places.

/** Add this to your page's CSS /
.floating-toc {
position: sticky;
top: 171px; / Offset for the header. Adjust as needed. */
}

2. just add a class .floating-toc to your column and it should work.
3. Report to Avada the need of a sticky column feature.

@Wordpresslover Thanks for your answer. I've already tried this, but it doesn't work. What about the container settings are they right?

Angebot.Uberbauung.Bomus.-.Google.Chrome.2021-11-24.08-27-21.mp4

@Paeddy85 That's perrfectly okey wht you did. In your case an extra custom work is necessary though. If you want me to help you please contact me: https://companyromania.com/contact-us/

I will need a login to your test site to solve it.