[Resolved] Reordering a hook for mobile.

[Craig]

Hi

I am using a filter plugin to create filters. I have created a hook to house the filters and display them in the left sidebar. generate_before_left_sidebar_content. The filters are in a div – class=”product-filter”

On a desktop, this works great and the filters display in the left sidebar.

On a mobile, the filter drops below the products and when scrolling up, the div scrolls on top of the menu.

How do I
1/ Get the div on a Mobile to display under the menu and above the products?
2/ When scrolling up, get the div to scroll under the menu?

Your help is always valued and appreciated.

[Ying]

Hi Craig,

1. Add this CSS:

 @media (max-width: 768px) {
    #left-sidebar {
       order: -1;
    }
}

2. Add this CSS:

#left-sidebar {
    position: relative;
    z-index: 1;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Craig]

Thank you Ying. Both work. Thanks So much

[Ying]

You are welcome 🙂

[Author]

Posts