FROM CACHE - en_header

sticky sidebar in collection page of Bakin's theme

Solved
mranasabbas
New Member
2 0 1

Here is the website link.  ( https://poufdesignsbyvalerie.com/collections/all )


I want the Category section to be sticky on top while scrolling.

Accepted Solution (1)

Accepted Solutions
RichardNguyen
Shopify Partner
1602 250 935

This is an accepted solution.

Hi @mranasabbas 

 

I’m Richard Nguyen from PageFly- Free Landing Page Builder

 

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->frame.scss.liquid->paste bellow code in bottom of file

 

.main-content, .wrapper-container {

    overflow-x: unset !important;

}

.left-sidebar {

    position: sticky;

    z-index: 1;

    top: 80px;

}



If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly

PageFly- Advanced Shopify Page Builder - Empowering 100.000+ active merchants.


Check our Evergreen List of Best Platforms To Sell Online.


Or our new series to Build The Perfect Mobile-Friendly Store.

View solution in original post

Replies 3 (3)
KetanKumar
Shopify Partner
34396 3444 11271

@mranasabbas 

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/frame.scss.liquid->paste below code at the bottom of the file.

@media screen and (min-width: 968px) {
.template-collection .header-sticky {
    position: absolute;
    width: 100%;
}
.template-collection .main-content {
    margin-top: 250px;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mranasabbas
New Member
2 0 1

Hi @KetanKumar 
Thanks for your reply...

 

Please see the link. I also want this to be sticky with header...

https://ctrl.vi/i/QCzQd53hF

RichardNguyen
Shopify Partner
1602 250 935

This is an accepted solution.

Hi @mranasabbas 

 

I’m Richard Nguyen from PageFly- Free Landing Page Builder

 

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->frame.scss.liquid->paste bellow code in bottom of file

 

.main-content, .wrapper-container {

    overflow-x: unset !important;

}

.left-sidebar {

    position: sticky;

    z-index: 1;

    top: 80px;

}



If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly

PageFly- Advanced Shopify Page Builder - Empowering 100.000+ active merchants.


Check our Evergreen List of Best Platforms To Sell Online.


Or our new series to Build The Perfect Mobile-Friendly Store.