Keep categories visibility when scrolling on product page

Site URL: https://www.cboothandson.co.uk/mens-grooming

Hello,

I was hoping someone could help me with this.
I would like the category navigation bar to be visible to the customer as they scroll down the product page. There seems to be several solutions for making a 'sticky page header' but that isn't what I'm looking for. I only want the 'category navigation' to stick and the products to scroll behind it.
Please see below for a screenshot highlighting exactly what part of the page I want to stick as the customer scrolls.

Thank you in advance. 

Try adding to Design > Custom CSS

ul.nested-category-children {
    position: sticky;
    position: -webkit-sticky;
}

On 1/23/2021 at 11:57 AM, tuanphan said:

Try adding to Design > Custom CSS

ul.nested-category-children {
    position: sticky;
    position: -webkit-sticky;
}

 

Hello @tuanphan thank you for getting back to me. I have tried the code and unfortunately it hasn't seemed to work. Any advice on how to proceed?

Thanks again. 

Hello @tuanphan & @paul2009

Can either of you help with this?

Thanks guys

On 1/25/2021 at 4:37 AM, Jordan-FIG said:

Hello @tuanphan thank you for getting back to me. I have tried the code and unfortunately it hasn't seemed to work. Any advice on how to proceed?

Thanks again. 

Hi. Sorry for the delay. I was off some day.

Do you still need help on this?

Hi @tuanphan

No need to apologise, thank you for getting back to me. To answer your question, yes, I am still needing your help.

Thank you in advance,

Jordan 

@tuanphan I would also appreciate a solution to this. Thanks

I figured it out.

This works for me:

 ul.nested-category-children {
    position: sticky!important;
    position: -webkit-sticky!important;
    top: 0;
    background: #ffffff;
    z-index: 9;
 }

https://www.ghostplugins.com/steps/sticky-product-category-sidebar-styles