sticky sidebar for woocommerce product page only

[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

[David]

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;
}

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

[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

[David]

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

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

[melvin wang]

Hi David.

Noted with thanks 🙂

Melvin

[David]

Thank you

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

[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

[melvin wang]

Hi David,

I found the solution 🙂 , sorry for bothering.

And thanks for your support

Regards

Melvin

[David]

Glad to hear that!

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

[Author]

Posts