Tutorial & code

Sticky Columns

This uses the "sticky" CSS position to make columns (and other things in Beaver Builder) float. Useful for floating sidebars, ecommerce carts, story chapters and special effects.

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Rows Nav 1

Video

Notes

This almost did not warrant a template, but making columns float is much requested. There is even a free Beaver Builder plugin for it.  Also, even though the CSS is simple, there are number of quirks to be aware of:

  1.  Applying sticky positioning to columns breaks the column drop down menu. Make the column wider to get access
    Update thanks to Zack Pyle we know the column issue only happens the CSS is added to Beaver Builder.  No issue if added to the Customizer or the Child theme’s styles.css file.
  2. Making all modules on a column means you have no access to the column settings.
    As above. No issue if added to the Customizer or the Child theme’s styles.css file.
  3. Child columns need to be set to equal heights.

 

Beaverbuilder Stickycolumns

See the Sticky Columns template in action.

Code

CSS

.sticky {
position: sticky; /* IE, Edge 15 and earlier versions do not support sticky positioning */
position: -webkit-sticky; /* for Safari */
top: 0; /* need either top, right, bottom or left for sticky positioning to work */
}
/* ------------------------------------------------------------------------------------

Replace the above with this below if you want sticky to work only on desktops and tablets.
For example, if the sticky column is not longer side by side.

@media only screen and (min-width: 768px) {

.sticky {
position: sticky; 
position: -webkit-sticky; 
top: 0; 
}
}

-------------------------------------------------------------------------------------*/

 

/* -----------------------------------------------------------------------------------------------
BONUS: Hide and reveal on scroll footer (ONLY IF YOUR FOOTER CONTAINS NO LINK)

Add this to your main CSS settngs (child theme's styles.css, the customizer or BB's global CSS)

footer{
position: sticky;
position: -webkit-sticky;
bottom: 0;
z-index: -1; 
}

IMPORTANT: the minus z-index will make links inaccessible 
-----------------------------------------------------------------------------------------------------*/

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

2 Comments

  1. Jonathan Gwyer on October 29, 2020 at 4:10 pm

    I didn’t watch the video, so apologies if it covers this…

    If you’ve got a sticky header, you can take this into account by adjusting the top setting.

    Scroll down to the booking form at https://www.whitstabledreams.co.uk/whitstable-beach-hut-hire/ to see it in action.

    • David Waumsley on October 30, 2020 at 3:26 am

      Thanks for this example Jonathan. I haven’t watched the video either.

Leave a Comment