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

---

@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.