Motion theme - How to add sticky filter in collection page

[Sivadarshan]

I’m using Motion Theme’s latest version in that I need to make the collection filters needs to be sticky in both mobile and desktop devices like this

website: https://zype5rktf4t9uxip-67925410094.shopifypreview.com

Reference website: https://0z31h5htbpumbdf7-25088491610.shopifypreview.com

Thanks in advance

[Mahfz_ShopiDevs]

You can use custom css to add this effect..

.collection-filter {
position: sticky;
top: 65px;
z-index: 999;
background: #fcfbf9;
}

[dev_solutions]

Hello @Sivadarshan

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code just above tag

.collection-filter {
    position: sticky;
    top: 60px;
    z-index: 2;
    background: white;
    padding-bottom: 6px;
}

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

[oscprofessional]

Hi @Sivadarshan ,

1. Go to Online Store > Themes > Actions > Edit Code > base.css

2. Add below code in base.css file

#CollectionSection .collection-filter {
    position: sticky;
    top: 70px;
    z-index: 999;
    background: #FCFBF9;
}

[websensepro]

Hi @Sivadarshan

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.collection-filter {
    position: sticky;
    top: 70px;
    left: 0;
    z-index: 1111;
    background: #FCFBF9;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[Sivadarshan]

@Mahfz_ShopiDevs Thanks for the code it’s working but, when we try to hover on the header menu the menu gets hidden behind the sticky filter, and when we scroll down the website the header menu gets hidden and comes back (attached in the video) at that time the filter is like hanging and there are white on the right and left. How to correct all the mistakes I mentioned.

Video Link: https://drive.google.com/file/d/1BUQxJHSVx6fQuuJqkptuL1Mdw_IpjE2b/view?usp=sharing

Thanks in advance

[Mahfz_ShopiDevs]

Oh.. just make the z-index to 9

.collection-filter {
    position: sticky;
    top: 68px;
    left: 0;
    z-index: 9;
    background: #fcfbf9;
}

[Sivadarshan]

@dev_solutions @oscprofessional @websensepro @Mahfz_ShopiDevs Sticky filter is hiding the menu items, when the filter was on sticky then the menu are showing

[Sivadarshan]

@dev_solutions @oscprofessional @websensepro @Mahfz_ShopiDevs , There is a small issue, when the filter is not in sticky the drop-down menu is hidden with the filters, when we scroll down and the filter section gets into sticky then the header menu items are visible, how to sort that. For reference, I’ll attach video

Reference Link : https://drive.google.com/file/d/1ARgvgoa0rO4JIy6ambZ8cGY8x8v1x1sw/view?usp=sharing

Website Link: https://fquz38lvk3np4nj3-67925410094.shopifypreview.com

Thanks in advance.

[websensepro]

Hello @Sivadarshan

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.collection-filter {
    z-index: 1 !important;
}
.site-nav__dropdown {
    z-index: 2 !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[Sivadarshan]

@websensepro Thanks for the code but now, the header menu is not sticky it

[websensepro]

@Sivadarshan

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.shopify-section.shopify-section-group-header-group {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

Result:

Everything is working fine

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[Sivadarshan]

@websensepro Thanks, but now the cart drawer is like this

[Sivadarshan]

@websensepro

[websensepro]

Remove the above code and make header sticky from here

[Sivadarshan]

@websensepro Thanks for the code but now, the sale badge is overlapped on the filter section

[websensepro]

@Sivadarshan

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.collection-filter {
    z-index: 2 !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[websensepro]

@Sivadarshan

I have seen that your issue has been resolved. Now, please mark the solution as well.
Thanks