Stick header in proper scroll position when having a custom fixed topbar on top of it

Support
1

We’re having trouble with a custom Discourse instance running inside a Django revproxy application (https://dev.edemocracia.labhackercd.net/expressao/).

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?

2

Add this to your custom CSS:

.d-header {
  position: fixed !important;
  top: 24px !important;
}
4 Likes
3

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.

This surely works.

2 Likes
4

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:

https://github.com/discourse/discourse/commit/2fe2c1bfb9918ae1d49aa534027bf825a64bc4aa

For anyone who hasn’t seen the problem, this is what happens when you use the Customize/Header option:

with_header
with_header852×480 1.31 MB

This is what it looks like normally, without a custom header:

without_header
without_header852×480 1.42 MB

5 Likes
5

Try this CSS. I hope it will work for any custom header.

1 Like
6

Guys, I am pretty new to editing the CSS and stuff like that so I’m sorry if this question has already been answered.

Our forums’ header looks like this with a custom bar:

GIF%20forum

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.

Is there anyone that can help me out with this?

3 Likes
7

Also interested in a fix for this. Anyone have any luck? I’m having the same issue as Tim