Users are discussing how to properly position Discourse’s sticky header when a custom fixed topbar is present above it. cfviotti explains their setup inside a Django revproxy app, where a 24px global topbar pushes content down, causing the header to stick too late (only after scrolling 24px). notriddle suggests a simple CSS fix: forcing .d-header to position: fixed with top: 24px, which cfviotti confirms works. LeoDavidson raises a broader concern: this solution doesn’t scale for variable-height headers (e.g., responsive multi-line headers), noting that Discourse’s scroll logic ignores content added via Admin/Customize/Themes/Header since it’s inserted outside the .d-header element — a potential oversight. vinothkannans offers an alternative CSS approach using .docked .d-header { top: 0; } to dynamically adjust positioning. Tim_van_Son and shaundefense report similar issues — their custom topbars leave unwanted gaps when the header sticks, indicating the need for a more flexible, dynamic solution that accounts for variable header heights and avoids hardcoding pixel values.
In this application we have a global topbar that is always sticked to the top of the page with a non sticked wrapper that has a height of 24px set (in order to “push” the site content).
When we scroll this page, the ‘#main’ top offset is then initially different from 0 now, so only after scrolling 24px it will stick by appling the ‘.docked’ class to the body. But since our global topbar is fixed, we’d like to apply the ‘.docked’ class and stick the Discourse header when the ‘#main’ offset is 24px instead of 0, in order to not overlay our bar on top of the header.
How should I approach this issue? Can I customize some of Discourse’s JS? Maybe just inject new JS code to override the default behaviour?
You know what… I guess wrapping your head around an issue a whole day trying to make things work the “proper” way (in this case by making it work only when the .docked class was applied) messes your brain ability to solve problems in the simplest of manners.
Can you think of a way to do this which would work without having a fixed-height custom header?
We have a 2 line header which will wrap to 4 lines on narrow screens (e.g. mobile). I guess it could use a fixed height dependent on the screen width and a bit of guesswork. (Not perfect as the width of the content varies over time.)
It seems that the Discourse code has an oversight here. It calculates the height of the d-header element, but if you do anything in Admin/Customize/Themes/Header, it is inserted above d-header, in a separate non-child element, and that extra height is not considered when scrolling.
It seems like the height of a common parent element should be used, or the Customize header should be inserted as a child of d-header.
It looks like this recent fix/commit was for something similar, but it doesn’t seem to have affected my site, so it must be something slightly different:
So what we want right here is the global topbar to be gone when scrolling down, and the main topbar stick to the top. We already tried adding the codes above to the CSS but when we do this the main topbar will stick to the top with a wide gap.
