[Support request] Sticky sidebar

Home Forums Support [Support request] Sticky sidebar

Home Forums Support Sticky sidebar

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2038045
    Nico

    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
    Nick

    #2038425
    Ying
    Staff
    Customer Support

    Hi 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 πŸ™‚

    #2040021
    Nico

    Hello 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
    Nico

    #2040211
    David
    Staff
    Customer Support

    Hi 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.

    #2040250
    Nico

    Good 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
    Nick

    #2040467
    Ying
    Staff
    Customer Support

    Hi 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 πŸ™‚

    #2040808
    Nico

    Good 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
    Nick

    #2040831
    Elvin
    Staff
    Customer Support

    Hi 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.)

    A wise man once said:
    "Have you cleared your cache?"

    #2040858
    Nico

    Good 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.

    #2040913
    Elvin
    Staff
    Customer Support

    I’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?

    A wise man once said:
    "Have you cleared your cache?"

    #2042205
    Nico

    Good 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
    Nick

    #2042332
    David
    Staff
    Customer Support

    I can confirm the CSS is working and the sticky sidebar looks good πŸ™‚

    #2042661
    Nico

    Hello @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.

    #2042816
    Ying
    Staff
    Customer Support

    That’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.

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.