By Stephen Walker

Update. I am not sure why, but the demo is no longer working. Could be a 7.7-related change.

Aside from the sticky header, Avada makes it difficult to intuitively add sticky positioning to a column or element (feature request submitted). Part of the problem is the creation of divs within divs when adding fairly simple content. Fortunately, Noel Smyth in the Facebook group has figured out how to implement this with a little bit of CSS. Adding a sticky class is fairly straightforward but in order to get the behavior to work correctly, you need to add a class to the parent div #boxed-wrapper and set the overflow to visible as the default is hidden. This step enables all the sub-containers to act normally. I put together a sticky columns demo page showing how this can work.

The basics:

  1. Add a sticky class
  2. Make sure to have top or bottom distance
  3. Add the class to the boxed-wrapper ID
.sticky {
position:sticky;
}
.top-space--lg{
  top:5rem;
}
#boxed-wrapper {
overflow: visible;
}

Originally published on February 12, 2022

share the article

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

  • List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

  • Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

  • Test Layout – The Becker

    Trying to duplicate the basic look and feel of Dirk Beckers' website using Avada.