we attempted to use your “global notice” feature. However, unfortunately, when you scroll, it disappears. Therefore, we’d like it to be sticky. That in return isn’t accomplishable via custom CSS since position:sticky can be applied to one element only and there’s already a sticky element: the header.
Could you make it configurable where the notice is put in the DOM so that we can put it in the header container to make it sticky, too?
Why don’t you use a banner?:
Thanks for the recommendation, but that doesn’t solve the problem described above: The global notice isn’t sticky and so isn’t the versatile banner. As I described further, this wouldn’t be possible to achieve by using CSS only since the versatile banner uses the same place in the DOM that the global notice uses, which is outside the sticky header container.
Fair point.
Another option is the Layouts Plugin, which adds sidebars that can be sticky. There’s also a Custom HTML widget for it that you can use to add any content you like.
If you apply sticky to the parent container it will work… though, if there are other alerts in this container they’ll stick too (like the “Do you want live notifications when people reply to your posts?” alert).
We have a CSS property that will properly offset the top from the header:
#main-container.container {
position: sticky;
top: var(--header-offset);
z-index: 9;
}