By Stephen Walker

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

share the article

Leave a Reply

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

RELATED ARTICLES

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

  • Customizing Tags

    Adding a custom look and feel to tags in Avada is easier than you may think.

  • Icons in Avada

    Icons can be a great design element to help guide users and provide visual interest. Avada provides a variety of ways to use icons, but occasionally, it is no intuitive.

  • Post Card Designs

    I have added a new page highlighting post card designs I have created.

  • YouTube® Video Parameters

    The YouTube video parameters allow you to control some of the features that the embedded player has enabled by default. Some have changed over the years and others are not quite as functional as one might like.