[Resolved] sticky sidebar for woocommerce product page only

Home Forums Support sticky sidebar for woocommerce product page only

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1518737
    melvin wang

    Hi,

    I have set a right sidebar to my woocommerce product page (sample). I would like to achieve the below
    1. Side bar top spacing (maybe 20px)
    2. Sticky when user scroll, with the spacing stay too – only set for woocommerce product page.

    This is the sample page which similar to what I would like to achieve on the side bar.

    Can you kindly assist me in this?

    TQ

    Melvin

    #1518792
    David
    Staff
    Customer Support

    Hi there,

    try this CSS, i also added some CSS to fix the padding and adjusted the top sticky position to stop it from hitting the sticky nav:

    .single-product .is-right-sidebar .inside-right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
    }
    #right-sidebar .yith_wcbk_booking_product_form_widget {
        margin-top: 20px;
        padding: 10px;
    }
    #1518802
    melvin wang

    Hi David,

    Thanks. I really appreciate it!

    I got another 2 layout may need your help, I would like to adjust the layout which look alike like the demo, could you please assist me with the CSS?

    My Site V.S Demo

    1. Mobile View sticky bar

    View post on imgur.com

    2. Mobile View Booking Form

    View post on imgur.com

    Thanks.

    Regards,
    Melvin

    #1518832
    David
    Staff
    Customer Support

    Would you mind raising a new topic so the original topic can be resolved.

    #1518834
    melvin wang

    Hi David.

    Noted with thanks πŸ™‚

    Melvin

    #1518879
    David
    Staff
    Customer Support
    #1519001
    melvin wang

    Hi David,

    I only wanted to apply the following code to Desktop but not on mobile and tablet. Could you let me know what to add into the code to achieve that goal?

    .single-product .is-right-sidebar .inside-right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
    }

    TQ David

    Melvin

    #1519212
    melvin wang

    Hi David,

    I found the solution πŸ™‚ , sorry for bothering.

    And thanks for your support

    Regards

    Melvin

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