Pebble's floating sidebar vs a floating menu/header

[arien]

Pebble wondering if there's a way to make the sidebars work with a floating menu/header so that they don't overlap each other and just respect their own boundaries. (I don't know how to word that any better, I apologize.)

Here's where I'm trying to use your sidebars, hopefully you see what I mean: pyrion.boards.net/

I've made the sidebar on the right the exact height to work with the floating menu, once you scroll down...but it still looks odd when you're at the top of the site and the menu floats at the bottom.

Thank you kindly :)

[Chris]

Note:

This is applicable to the specific theme <!-- "CITYSCAPES" FREE PREMADE THEME © PUNKI 2018 - DO NOT REMOVE OR ALTER CREDITS -->

A pure CSS solution where the peekaboo is not shown until the navigation tree begins sticking to the top of the screen might work. It should be noted that since a specific behavior was not specified here, I followed the default behavior of the theme: when the top banner is in view the navigation tree is offscreen, so the peekaboo will also stay offscreen.

The peekaboo will remain offscreen until the navigation tree starts sticking to the top so that they don't overlap each other and just respect their own boundaries. If this is not the desired behavior, then javascript will probably be necessary to get a more complex behavior.

#outer-wrapper:not(:has(.inner.stick)) :where(#Pouter,#LPouter) {
   top: 100vh!important;
}

#outer-wrapper:has(.inner.stick) :is(#Pouter,#LPouter) {
   top: 130px!important;
}_{^* Installation: copy and paste to the bottom of the theme's style sheet}

I say might since this won't have an effect on Mozilla/Firefox users (as of this writing) unless the users of that browser enable the experimental flag (all other major desktop browsers have fully implemented the new :has() selector but Firefox has been delayed due to a bug)

SPOILER: Click to show

Preview:

☟

☟

☟

[arien]

This is an amazingly detailed and helpful response. Thank you so much for your help, this is precisely what it needed. Chris

[Chris]

You are welcome arien

I did make a typo since it should be top: 130px !important; instead of top: 30px !important; to make enough room for the floating bar and not cover peekaboo content. The !important modifier is necessary in this case to override the inline top values placed on the peekaboo elements (which will still serve its purpose for browsers that do not currently support the new pseudo selector such as Firefox).

Also note that there are several bugs in Firefox regarding this :has() feature one of which causes it to activate on #outer-wrapper:not(:has(.inner.stick)) improperly (selector cache bug) when the secondary stick class is actually present on the element (should the user choose to enable this experimental feature on their Firefox browser).

[Pebble]

Cheers Chris