[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

[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

[Zed]

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.

[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

[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?

[Zed]

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