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.

VIDEO
CODE

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.

Example

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 
-----------------------------------------------------------------------------------------------------*/

Discounts On These Two Lifetime Deals:

MainWP.   Discount code "digitalfreedoms" 15% off
WP Code Box.  Discount  code "beaverjunction" 25% off

--------------------------------------------------------------

 

Get the Beaver Junction Plugins here

Get it now

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.

4 Comments

  1. Jonathan Gwyer 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.

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

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

      Reply
  2. Stacie Stacie on October 1, 2021 at 6:47 pm

    I plugged this code into my custom CSS section, then added the sticky class id to my column element, and it acts sticky while i’m in the beaver builder editor, but once I’ve published the page, it reverts to non-sticky. Tried clearing my browser cache (Chrome) and host cache, but no luck. Doing some troubleshooting now…

    Reply
  3. Tim Tim on December 8, 2022 at 3:46 am

    Are you sure this still works if you have multiple modules a sidebar and want them all to be sticky?

    Reply

Leave a Comment