One of my pet peeves with Avada is the difficulty and inconsistency of trying to make columns sticky. In an earlier post, I wrote about some CSS that was put together for making columns sticky. CSS, but through trial and error, I’ve found that this doesn’t work all the time. Today on the Facebook group, somebody found an example of sticky that intrigued me because it had sections with different background colors and content. When I looked at the code, it changed my paradigm as it relates to Avada and opens the doors for a lot of creativity.

For a little background, the typical example is a two-column format (e.g.,1/3+2/3) with long content in the wider column and some content that needs to moe as the reader scrolls in the narrower column. In a normal HTML setup, you can add a div within the narrower column and assign a couple of CSS propertied — position:sticky and a top value. The sticky container will remain at the top of the viewport and appear to move the length of the narrow dive until it reaches the bottom of the parent. This setup is almost impossible in Avada with some very specific CSS.

Enter the new paradigm — the sticky container

Avada has the concept of sticky containers and has for a time, but typically these are for headers and navigation. But what about emulating the concept described above? No way … wait, why not? Using a sticky container for the narrow column (1/3 column aligned left) and allowing the rest of the content to move by. Having done it I can not think of why I didn’t do it before, but it is very easy to do and requires no custom CSS. The key is the z-index of the containers with the sticky container being higher than the content containers so that the content slide below. Rather than writing a lot more just check out the demo.

The Downside

If you are familiar with z-index, the downside should be fairly obvious. Since we are using a container that is set above the others and spans the width of the page, any time the content moves under the sticky container, interactive elements — hover, tabs, accordions, buttons, hyperlinks, etc. — are blocked.

Originally published on March 29, 2022

Beautiful landscape of azure blue and green showing snow capped mountains and calm lake.Plugin Recommendation: Ultimate Dashboard Pro
four paper card tagsCustomizing Tags

Leave a Reply

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

RELATED ARTICLES

  • 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 Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Adding Dynamic Data to a Toggle

    Adding Dynamic Data to a Toggle

    Adding dynamic data to a toggle in Avada is easier than you think.

    February 12, 2023

  • Read Using Avada Elements in the Block Editor

    Using Avada elements in the block editor to optimize tips and tricks.

    October 29, 2022

  • Read 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.

    September 25, 2022

  • Read Buttons, buttons, and more buttons

    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.

    August 24, 2022