UPDATE: As of Avada 7.8, there is now a sticky column feature that works fairly well, but this example can be used if you need sticky where it currently fails to work.

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 a top or bottom offset 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 Feb. 12, 2022

man holding his head while sitting on chair near computer deskAvada - the 2022 opinion
laptop computer showing data chartsPlugin Update: wpDataTables

Leave a Reply

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

RELATED ARTICLES

  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read 2 Code Snippets for Table of Contents

    2 Code Snippets for Table of Contents

    Two snippets to change behaviors and usability of the Avada table of contents element.

    April 1, 2023

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023