When the header submenus theme component is active, the icons at the bottom of the sidebar disappear from the screen.
There is probably some kind of CSS calculation going the wrong way?
When the header submenus theme component is active, the icons at the bottom of the sidebar disappear from the screen.
There is probably some kind of CSS calculation going the wrong way?
Custom headers arenāt included in the calculation at all, this can be reproād by adding any content to the header
section of a theme.
The calculation we use for the sidebar and chat takes into consideration the height of the Discourse header and sets --header-offset
as a variable when calculating some heights.
Including custom headers might be a little tricky because custom header content doesnāt stick on scroll by default like the Discourse header doesā¦ so if we include it in the calculation by default, once you scroll and the custom header is gone, the height is then incorrect.
So for example, if I manually increase --header-offset
by the height of my custom header (itās roughly 60px by default), you get a gap above the sidebar on scroll:
We add a .docked
class to the body
once a custom header is scrolled out of view, so itās possible to use thisā¦ which is better, but thereās a noticable transition as the sidebar height adjusts between statesā¦ this is becuase .docked
is either on or off.
If you want a sticky header, this is a little easier to work aroundā¦ because you can increase --header-offset
by the height of the custom header, and then set .d-header-wrap
ās top value as the height of the custom header:
One solution that comes to mind for improving the case of the non-sticky header is to:
--header-offset
--header-offset
calculation based on scroll position. This will more gradually adjust the sidebar height in a way that the .docked
class can not.Might take some experimentation to get it rightā¦
Thatās very helpful, thank you @awesomerobot
(moved this to ux)
This has been implemented here (big thanks to @david):
This should solve sidebar, chat and some other issues with custom header content.