- This topic has 9 replies, 2 voices, and was last updated 1 year, 11 months ago by
David.
-
AuthorPosts
-
May 1, 2019 at 3:47 am #885306
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?
May 1, 2019 at 3:57 am #885315David
StaffCustomer SupportHi there,
why not use the sidebars to create the separate columns?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 1, 2019 at 4:18 am #885330Ender
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?
May 1, 2019 at 4:36 am #885349David
StaffCustomer SupportI provided a similar solution here:
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 1, 2019 at 5:08 am #885390Ender
You’re my Avenger. Many thanks.
May 1, 2019 at 5:10 am #885396David
StaffCustomer SupportHaha – glad to be of help.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 1, 2019 at 5:21 am #885408Ender
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; }
May 1, 2019 at 5:26 am #885418David
StaffCustomer SupportWorking for me? Browser cache need clearing maybe?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 1, 2019 at 7:40 am #885654Ender
Yes 🙂
May 2, 2019 at 12:48 am #886217David
StaffCustomer SupportGlad to be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.