Sticky Column In Website Builder Gridbox. Use Any Content Inside

Sticky Column In Website Builder Gridbox. Use Any Content Inside

The first eCommerce theme built with the Gridbox Store App was presented a few weeks ago. We got questions from you on how to realize the modern sticky sidebar navigation like in the recently implemented Joomla template Snoop. So today we're going to show you how to create and where to use Sticky Column in Gridbox sites.

Today's tips & tricks will allow you to stick a column and place absolutely any plugin in it. Using this trick, focus users' attention on an element and make it visible throughout the page scrolling. So let's get started!


Examples For Your Inspiration

As usual, we provide you with a few ideas with the new effect. So let's take a look at how this can be implemented on your sites.

Sticky Sidebar

Make your banner, recent posts, products, category list, or any other content always visible while the customer scrolling the page. Increase clicks with a sticky sidebar.



Sticky Add To Cart

The Sticky Add To Cart is a great solution if your product has a long description or Gallery. Using a "Sticky column" trick, The button "Add to Cart" is always visible making it easier for your customers to checkout. Get more clicks with the Sticky "Add to Cart" button!



Step-By-Step Tutorial

After seeing ideas for implementing the Sticky Column, it's time for the practical part. So follow the steps below!

Step 1: Copy Class Suffix.

Copy class suffix and paste it in the field "Class Suffix" of the Row.

sticky-sidebar

Step 2: Copy CSS Code.

Copy the CSS code and paste it into the Gridbox Code Editor.


Gridbox CSS Editor - Joomla Website Builder Gridbox


@media (min-width: 769px){
.sticky-sidebar .column-wrapper {
   display: block !important;
}

.sticky-sidebar .column-wrapper .ba-grid-column-wrapper:nth-child(1) {
   position: sticky;
   top: 160px;
  }
}

  • nth-child(1) - the sequence number of the column;
  • top: 160px - the sticky column sticks, when you reach its scroll position.


That's all you need to know to make a Sticky Column in the Joomla Website Builder Gridbox. Play with the Sticky Column and share the results with us in the comments below!