[Support request] Floating sticky left sidebar on product archive page

[nik9]

Hello

On Desktop I use the left-sidebar to place the product filters in it. Now I want to define this left-sidebar as floating sticky sidebar. I now that there are some Plugins available wo can handle this. But I want to avoid to install a plugin just for that basic case. Is there a option in GP to made such a floating sticky left-Sidebar for product archive page?

Thanks!
N.

[Elvin]

Hi,

You can try Leo’s solution here:
https://generatepress.com/forums/topic/need-help-making-left-sidebar-sticky/page/2/#post-1425851

Let us know if it works for you.:)

[nik9]

Hi Elvin,

Thanks. I already tried this CSS here but this is not working on mysite. As I checked, the CSS classes are the same but not working at all. 🙁

.site-content {
    display: flex;
}
.site-content > div {
    left: unset !important;
}

#left-sidebar {
    order: -1;
}

#left-sidebar .inside-left-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
}

[David]

Hi there,

The CSS sticky property won’t work when the parent container has overflow hidden.
The GP Off canvas and the OCS panel both require this

Try adding this CSS:

@media(min-width: 769px) {
    html,
    body {
        overflow: initial !important;
        overflow-y: initial !important;
        overflow-x: initial !important;
    }
}

This will remove overflow hidden on larger screens – so won’t apply when the Off Canvas requires. It shouldn’t affect the OCS CSS either as that is more specific and only applied when the panel is present.

[nik9]

Hello Guys

Cool. This is working now.

But I noticed a other issue now. There are a lot of filter in the sidebar. And sometimes (when all values are displayed) its not possible to scroll in the filter or let’s say in the sidebar area. How can we activate the sidebar scroll? When the mouse is in the product section, only this section should scroll and when the mouse pointer is on the side-bar area, only this section should scroll?

Current CSS:

@media(min-width: 769px) {
    html,
    body {
        overflow: initial !important;
        overflow-y: initial !important;
        overflow-x: initial !important;
    }
}

.site-content {
    display: flex;
}
.site-content > div {
    left: unset !important;
}

#left-sidebar {
    order: -1
}

#left-sidebar .inside-left-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 125px;
}

[David]

Not sure but you could try this CSS instead:

@media(min-width: 769px) {

    html,
    body {
        overflow: initial !important;
        overflow-y: initial !important;
        overflow-x: initial !important;
    }

    .site-content {
        display: flex;
    }

    .site-content>div {
        left: unset !important;
    }

    #left-sidebar {
        order: -1;
        position: -webkit-sticky;
        position: sticky;
        top: 125px;
        max-height: calc(100vh - 125px);
        overflow: auto;
    }
}

[nik9]

Hi david,

Great! It work very good now. And i’m also add come CSS to stly the scroll bar a little bit. It look nice!

Thanks!!

[David]

You’re welcome

[Author]

Posts