[Resolved] Floating Social Media

[Samuel]

Hello,

how can I replicate what David did?
https://gpsites.co/liberte/bedtime-reading/
https://generatepress.com/forums/topic/make-a-generateblock-sticky-on-scroll/#post-1263086

That’s a really cool conversion. From what I understand, David used generator blocks Is that right? Then how come it scrolls all the way to the comments? So far, GB only operate in the content area. A step by step guide would be very cool 🙂

[Tom]

Hi there,

He actually used this plugin: https://wordpress.org/plugins/gp-social-share-svg/

Then he added a Hook Element to the after_entry_header hook with this content:

<div class="floating-container">
[gp-social]	
</div>

Make sure to execute shortcodes and set the Display Rules to single posts.

Then he added this CSS:

@media (min-width: 840px) {
    .floating-container {
	display: block;
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 80px;
	height: 0;
    }

    #gp-social-share {
        top: 1em;
        flex-direction: column;
        left: -50px !important;
    }
}

[Samuel]

Nice, thanks!

[Tom]

No problem 🙂

[Author]

Posts