How to set the right sidebar to position:sticky

Forums » WordPress » Bravada » How To

  • Author
    Posts
  • June 23rd, 2022 at 16:11 #130723
    ChrisSchwarz

    I am new to these CSS variables thing. If I try to set the position: sticky; in the custom CSS section, nothing happens!

    Can anyone help me, how to override, whatever is interfering here?

    Thanks and cheers!
    chris

    June 27th, 2022 at 14:14 #130847
    ChrisSchwarz

    Here’s the website in question, if that helps…

    https://hotel-villamontevino-potsdam.de/mehr-als-nur-ein-hotel-in-potsdam/

    I’m talking about the right-hand sidebar.

    Thanks!
    chris

    Website: hotel-villamontevino-potsdam.de/mehr-als-nur-ein-hotel-in-potsdam

    • This reply was modified 2 years ago by ChrisSchwarz. Reason: wrong URL
    June 28th, 2022 at 17:25 #130857
    Zed
    Cryout Creations mastermind

    Hi,

    The sidebar has the same height as its container (which also holds the main content and spans the full height of the site itself) so the sticky positioning has no effect on its placement with the current layout. The full height is required for the sidebar background color option to work correctly and the sticky positioning would require limiting the height of the parent container (to, for example, the viewport height):

    #container {
    max-height: 100vh;
    overflow: auto !important;
    display: block;
}

#secondary {
    position: sticky;
    height: auto;
    top: 1px;
}
    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    June 29th, 2022 at 13:23 #130873
    ChrisSchwarz

    That introduces some weird behaviour! Sometimes it’s sticky, most times it’s not. I get the feeling, when opening the dev-tools in Firefox, it helps a bit with the sticky positioning, on closing the dev-tools it returns to non-functional state.

    It also adds a vertical scrollbar, which does funny things. When scrolling down the page, it also scrolls down, as if it was linked with the overall page somehow. :o)

    Here’s one page with sufficient height:
    https://hotel-villamontevino-potsdam.de/mehr-als-nur-ein-hotel-in-potsdam/

    Website: hotel-villamontevino-potsdam.de/mehr-als-nur-ein-hotel-in-potsdam

    • This reply was modified 2 years ago by ChrisSchwarz. Reason: typo
    June 29th, 2022 at 13:29 #130875
    ChrisSchwarz

    I guess it would be a nice-to-have, to have a surrounding container for the right sidebar’s items, which would define an overall height for the items. It has been created with the customizer -> Widgets -> right sidebar

    Is there any way to add a conatiner for these? Like some hook or sth?

    June 30th, 2022 at 15:09 #130904
    Zed
    Cryout Creations mastermind

    I provided that CSS as a preview on the further issues that would need to be resolved concerning CSS sticky positioning for the sidebar content.

    The main problem is that position: sticky only works when there’s a parent container that has scrolling active on it. As both the sidebar (regardless of its height) and the main content are part of the same parent container and share horizontal space, the container doesn’t need internal scrolling and it expands to fit whichever of the two child elements is taller.
    To have the sidebar act as being sticky with the current theme layout most likely JavaScript is needed to manipulate its positioning on scroll.

    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘How to set the right sidebar to position:sticky’ is closed to new replies.