[Resolved] Split the container for the blog content

[Ender]

Hi, I want to create a sticky container with the function “Sharing” similar to the one on this blog page:

https://kinsta.com/blog/broken-links/ (on the left side the sharing is sticky)

I don’t want to use a plugin for the sticky effect. I also don’t want to use sidebars.

I think when i split the container with the blog content (i think it is “entry-content”) into three columns, i could then create in the 1st column a new class “sticky-sharing” and make it sticky with the command

@media (min-width: 769px) {
    .sticky-sharing {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

Maybe the blog entry-content area could be divided into three parts with a snippet in the ratio 20:60:20?

[David]

Hi there,

why not use the sidebars to create the separate columns?

[Ender]

I’d love to use sidebars. But if I activate the sidebars on both sides and then want to set the left sidebar sticky, then the left bar strangely moves to the right side. I use this css

@media (min-width: 769px) {
    #left-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

Now I have activated this so that you can see it.

Update1:

I use for the HTML Widget in the Left Sidebar this class

@media (min-width: 1000px)
.sticky-sharing {
    background-color: #ccc;
    margin-top: 500px;
    width: 100px;
    position: absolute;
    margin-left: -690px;
}

I get it now. I think it’s a handicraft solution and not so compliant with common encodings. Do you have a better idea?

[David]

I provided a similar solution here:

https://generatepress.com/forums/topic/social-share-buttons-only-in-post-and-fixed-in-sidebar/#post-830811

[Ender]

You’re my Avenger. Many thanks.

[David]

Haha – glad to be of help.

[Ender]

Sorry David, one little problem i get:

Sticky not working on Safari. Code is:

.gp-social-share {
    position: sticky !important;
    position: -webkit-sticky !important;
    flex-direction: column;
    margin-left: 100px !important;
    top: 200px;
    z-index: -1;
}

[David]

Working for me? Browser cache need clearing maybe?

[Ender]

Yes 🙂

[David]

Glad to be of help

[Author]

Posts