Site logo

Archived topic

Social Share buttons only in post and fixed in sidebar

34 replies · Started by Santa on March 3, 2019

Viewing posts 31–35 of 35

Hi there,

so the Liberte site uses this set-up.

1. Install the GP Social Share Plugin.
2. Create a new Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

2.1 Add code this in the Hook content:

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

2.2 Select the after_entry_header hook
2.3 Check the execute shortcodes check box.
2.4 On Display Rules set Location: Posts > All Posts
2.5 Publish

3. Add 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;

    }
}

You may need to tweak it to suit your padding etc.

Great, David! I adjusted the left value to -150. I do love the final result. Thanks a lot for the help and the support. Keep doing the GOOD jog. Cheers

Awesome - really glad to hear that!

Hi,
Sorry to re-open this thread, but I am having some issues with this css.
It works, but it makes the text and links in the post adjacent to the sticky share buttons non-selectable and non-clickable.
It behaves as if there is a hidden layer adjacent to the social share buttons.

Please open a new topic for your question.

Thanks!

This archived topic is closed to new replies.