- This topic has 11 replies, 3 voices, and was last updated 4 months, 1 week ago by
David.
-
AuthorPosts
-
August 6, 2020 at 7:47 am #1389464
Marcel
Hello and congratulations for the best ever version of GPP (testing the beta version 1.11.0-rc.1).
So, I have created a new Element (Block – Right sidebar), and now I would like to make it fixed on the scroll. To explain better, when using the default sidebar, you can make a widget to be fixed with Q2W3 Fixed Widget plugin for example or you can use a CSS snippet to make the last widget sticky.
How to proceed in this specific case with the Block Element which replaces the right sidebar?
Thank you and CONGRATULATIONS AGAIN!
MarcelAugust 6, 2020 at 7:59 am #1389627David
StaffCustomer SupportHi there,
thanks for the feedback – its much appreciated.
Can you share a link to your site so we can look at a CSS Solution – edit your original topic and use the Site URL field to share a link privately.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 6, 2020 at 8:10 am #1389644Marcel
Thank you, David.
I’ve shared the link privately.The case of the Block element is on the home page.August 6, 2020 at 8:14 am #1389649David
StaffCustomer SupportTry this CSS:
#right-sidebar { position: -webkit-sticky; position: sticky; top: 60px; /* offset from top of screen on scroll */ }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 6, 2020 at 8:56 am #1389718Marcel
Perfect. It works. I suppose this snippet makes the entire right sidebar to stay sticky.
One more question: would it be possible just the last block element in the right sidebar to stay sticky? I’ve added one more block just for testing/ learning reason.August 6, 2020 at 9:20 am #1389742David
StaffCustomer SupportUse this CSS instead:
@media(min-width: 768px) { .right-sidebar .site-content { display: flex; } .inside-right-sidebar { height: 100%; } .sticky-block { position: -webkit-sticky; position: sticky; top: 60px; } }
And give the block a CSS class of
sticky-block
Noticed you’re using a Cover Block … have you tried out GenerateBlocks yet?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 6, 2020 at 10:12 am #1389839Marcel
1. Of course, I use GenerateBlocks
2. I am not sure if I proceeded correctly:
– here is where I’ve added the CSS Class to the last block: https://prnt.sc/tv86r9
But no block in the right sidebar is sticky now. Maybe I’ve done something wrong?August 6, 2020 at 12:51 pm #1390116David
StaffCustomer Support1. 🙂
2. Made a typo – updated the CSS here
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 6, 2020 at 1:59 pm #1390200Marcel
David, you are a genius.
Thank you for your outstanding support!
The GP team is the best of the best. EVER.August 6, 2020 at 3:38 pm #1390327David
StaffCustomer SupportYou’re welcome – glad to be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 9, 2020 at 10:20 am #1437045David
Thanks Marcel and David for this. Your ongoing discussion and solutions sorted out a problem I came across today.
I decided I wanted a sticky fixed widget on a specific review post I did without showing any of my usual right sidebar widgets. Marcel’s idea of using a block to replace the right sidebar along with David’s CSS did the trick for me.
Thanks.
September 10, 2020 at 3:13 am #1437753David
StaffCustomer SupportAwesome – really glad you found this useful !
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.