[Resolved] Floating share icons

[Ying]

Hi there,

Check the screenshot below:
https://www.screencast.com/t/foLVJ6wK

[Adarsha]

Hi, thanks, it works now.
How can I make sure it is much bigger and also add a line like “Share on” to its side?

[David]

Include the text inside the HTML.
So change this:

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

to

<div class="floating-container">
Add your text here
[gp-social]
</div>

[Adarsha]

Hey.

Was any of the previous codes you gave had something to do with it being added to right sidebar?
Because, as soon as I enabled right sidebar, the icons jumped to right exactly like I wanted it.
But I have not added this html in right sidebar widget. It is in post template.

Further, how can I make these icons to be sticky so that it can move along with scrolling?
I created a staging site and sent a sample link.

[David]

No – theres no relevance to the sidebar in the codes we provided. It will/should work whether there is a sidebar or no sidebar.
The HTML i provided has been added to the Container Block that has the Breadcrumbs inside it.
You need to move the HTML to the Container Block that has the the Dynamic Content block.

[Adarsha]

How is it that it added to side then? Until I enabled sidebar it was at top and now it has moved to side.
If you want, I can disable the sidebar and show you. It will then move to top.

I actually want it this way only. But I want to know why it went to side, so I can understand.

[David]

You can disable the sidebar if you like.
But the only conditional part of the code is this part of the CSS:

@media (min-width: 840px)

So it only positions itself vertically and sticky on screens wider then 840px.
This was defined for the original site it was built for. You may need to adjust the 840px breakpoint to suit your site.

If you want the social icons to stick, then you need to make the change i said here

[Adarsha]

Hey. I did as you mentioned.
It did work. Thank you

But, when I add “share on” text, it moves to horizontal. While share icons remain vertical.
How can I make it alright?

Also want to increase the size of hare icons if possible.

[David]

Check in the Social Share Plugin settings for the Icon Size.
For the text, wrap it in some HTML with a CSS class so we can orientate it eg.

<span class="share-title">You share text</span>

[Adarsha]

So it only positions itself vertically and sticky on screens wider then 840px.
This was defined for the original site it was built for. You may need to adjust the 840px breakpoint to suit your site.

Can you give me idea on what part of code it defines to be vertical?
I want to add more padding at top so that it wont go to edge when scrolling also add more padding on right side near content.

But not sure where its defined to do vertical. As it shows horizontal at top until I enable sidebar.

[Fernando]

Hi Adarsha,

The specific code making it vertical is this: flex-direction: column; in the code provided by David. The screen width where this change occurs is defined through this: @media (min-width: 840px).

You can add top padding for instance by modifying the code as such:

@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;
        padding-top: 50px;
    }
}

Kindly modify padding-top: 50px; with your preferred value.

To modify the “space” between the social icons and the content, you may modify the left value. However, you’ll need to adjust the @media (min-width: 840px) breakpoint as well to make sure it appears all the time.

Hope this clarifies. 🙂

[Adarsha]

Hey.

Thanks for the reply.
Unfortunately both of them are not working.
I have put top padding on 500 and left also on -500 and nothing changes.
I have put in on 500 just to see if anything varies.

[Adarsha]

Hey, it has moved. But putting back on previous values is not moving it back. It has stuck to wide sides sadly.
https://prnt.sc/mOk6-1jM2P4h

[Adarsha]

Ok I completely got rid of the plugin. It has quite some issues and ain’t updated.

Thanks a lot for trying to help with all the codes though. Appreciate it.

[Fernando]

I see. You’re welcome Adarsha! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

[Author]

Posts