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!
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.
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.
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!
After seeing ideas for implementing the Sticky Column, it's time for the practical part. So follow the steps below!
Copy class suffix and paste it in the field "Class Suffix" of the Row.
sticky-sidebar
Copy the CSS code and paste it into the Gridbox Code Editor.
@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;
}
}
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!