[Resolved] Sticky share at the bottom of the page

[Anders Nielsen]

Hi

I’m trying to create a Sticky “social share” like this page, link: https://www.storybase.com/blog/what-is-a-good-seo-content-brief-8-important-elements/

I need some help.. can you help me with the css?

[Leo]

Hi there,

Have you added the share buttons yet?

[Anders Nielsen]

yes, the link to my page is in the private information

[Anders Nielsen]

The social share is located at the right bar – below the Post author name.

[David]

Hi there,

can you remove the current CSS you have for the Sticky Share container and sticky share element – then we can see what CSS is required.

[Anders Nielsen]

Ok.. it is removed.

[Ying]

Hi Anders,

Try this CSS:

.gb-container.gb-container-bc2eca0f.sticky-share-container {
    position: sticky;
    top: 800px;
}
.inside-right-sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
}

Let me know 🙂

[Anders Nielsen]

Hmm not working.. I think the top: 800px is the issue.. Also when used on other posts.

[Anders Nielsen]

Seems to work with

.gb-container.gb-container-bc2eca0f.sticky-share-container {
position: sticky;
top: 70%;
}

Is that a ok CSS?

[Anders Nielsen]

I’m on a smaller screen size… 13″ mac – there you can’t see the “social share”

[Ying]

Yes, that’s a better way 🙂

Could also try this:top: calc( 100vh - 178px);

178px is the height of the block, 100vh is the screen height, so no matter how big the screen is, the block will show at the bottom of the screen.

[Anders Nielsen]

Great thanks

[Author]

Posts