Archived topic
Split the container for the blog content
9 replies · Started by Ender on May 1, 2019
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?
Hi there,
why not use the sidebars to create the separate columns?
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?
I provided a similar solution here:
You're my Avenger. Many thanks.
Haha - glad to be of help.
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;
}Working for me? Browser cache need clearing maybe?
Yes :)
Glad to be of help
