- This topic has 13 replies, 4 voices, and was last updated 2 years, 4 months ago by Ying.
-
AuthorPosts
-
December 4, 2021 at 4:33 am #2038045Nico
Hey There!
Is there an option in GP to make the sidebar sticky at desktop like this page?https://www.ostsachsen.de/goerlitz/boats-friends-neisse-bootstouren/
As you can see the sidebar isnt sticky at the first moment but if you scroll over the end of the sidebar it gets sticky.
thnx for helping
NickDecember 4, 2021 at 10:49 am #2038425YingStaffCustomer SupportHi Nico,
GP doesn’t have this option built in.
If you can link us to the page and let us know from which widget you want it to be sticky, we can help with the CSS.
Let me know π
December 6, 2021 at 7:32 am #2040021NicoHello Ying. Sorry for my late reply, but unfortunately your message ended up in our spam filter π
If I understand your answer correctly, it cannot be resolved in such a way that it works for any number of widgets. Correctly?
If so, then we would prefer not to implement it via CSS.
best regards
NicoDecember 6, 2021 at 8:56 am #2040211DavidStaffCustomer SupportHi there,
with a CSS only option you’re kind limited to how that works. If all the ‘widgets’ were inside a single container – then you could. If they all sit in their own containers then it gets complicated. And if the number of ‘widgets’ are not known then you need to use Javascript.
If you have a site you want to apply it to then we can take a look.
December 6, 2021 at 9:34 am #2040250NicoGood evening David!
Thank you very much for your timely feedback. We are currently working on the relaunch of our website and are using the GeneratePress theme for the first time. You can see the test page with the widgets here:
see private area.
The reason we found the StickySidebar solution so interesting is that the site would look much more present.
If you scroll down the page and at some point no more widgets are displayed on the right edge, it looks pretty lost.
I hope you understand what i mean?
best regards from Germany
NickDecember 6, 2021 at 1:59 pm #2040467YingStaffCustomer SupportHi Nico,
Give this CSS a try:
div#right-sidebar .inside-right-sidebar { position: sticky; top: 65px; } .inside-right-sidebar { flex: 1; }
Feel free to adjust the
65px
to adjust the position of the sticky sidebar/Let me know if this helps π
December 6, 2021 at 11:53 pm #2040808NicoGood morning @Ying
good morning @David.Thanks for the support. Unfortunately, the CSS snippet doesn’t work as shown on this page:
https://www.ostsachsen.de/goerlitz/boats-friends-neisse-bootstouren/
You can see on this page that the sideback only becomes stickey when the last widget has been reached while scrolling.
I think the GP support is great, but I don’t think that a CSS snippet is the solution here. It’s an additional feature …
Warm greetings from Germany
NickDecember 7, 2021 at 12:28 am #2040831ElvinStaffCustomer SupportHi Nick,
The CSS provided by Ying won’t work on that page as the site isn’t made with GeneratePress. (It’s using Tripster).
Since the theme is different, the selector will not match. That’s why it wasn’t working.
It’s best to contact Tripster’s developer/support for this. As they’ll know more about what’s best practice in making their sidebar widgets sticky. (Perhaps they have a toggle to make widgets sticky somewhere in their theme’s settings UI incase they have one.)
December 7, 2021 at 1:19 am #2040858NicoGood morning Elvin,
the page: https://www.ostsachsen.de/goerlitz/boats-friends-neisse-bootstouren/
serves only as an example for StickySidebar.
Our side is: (see private area)
Please note: The StickySidebar in the example page will only be active when the last widget is reached when scrolling down.
December 7, 2021 at 2:38 am #2040913ElvinStaffCustomer SupportI’ve tested the CSS Ying provided and it seems to be working fine.
https://share.getcloudapp.com/P8u8AWd6
Can you share how you’re adding the CSS?
December 8, 2021 at 3:53 am #2042205NicoGood Morning @Ying!
good Morning @Elvin!We have the CodeSnippet:
div # right-sidebar .inside-right-sidebar {
position: sticky;
top: 65px;
}
.inside-right-sidebar {
flex: 1;
}implemented again. You can see the result here:
(private area)
Does the representation look good on you?
If necessary, we can also make a presentation video of it.
send the best greetings from Germany and thank you for your help
NickDecember 8, 2021 at 6:05 am #2042332DavidStaffCustomer SupportI can confirm the CSS is working and the sticky sidebar looks good π
December 8, 2021 at 8:52 am #2042661NicoHello @david!
Thank you very much for your great support. I really appreciate that.If you look closely at the video in the private area, you can see that the sidebar becomes sticky for a moment when you scroll down in the middle of the route and then move on again. The same thing happens when you scroll up.
I hope you see what I mean.
December 8, 2021 at 12:01 pm #2042816YingStaffCustomer SupportThat’s the normal behavior, the CSS make sure that the sidebar has the same length as the main content area.
When the end of the sidebar reaches the end of the content, they will scroll up together.
It has the exact same behavior as the example site you provided.
-
AuthorPosts
- You must be logged in to reply to this topic.