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

Home Forums Support Floating sticky left sidebar on product archive page

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1465625
    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.

    #1465971
    Elvin
    Staff
    Customer Support

    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.:)

    A wise man once said:
    "Have you cleared your cache?"

    #1466487
    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;
    }
    #1466860
    David
    Staff
    Customer Support

    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.

    #1467124
    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;
    }
    #1467430
    David
    Staff
    Customer Support

    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;
        }
    }
    #1467798
    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!!

    #1467990
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.