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

**URL:** <https://meta.discourse.org/t/stick-header-in-proper-scroll-position-when-having-a-custom-fixed-topbar-on-top-of-it/72873>\
**Category:** Support\
**Created:** [2017年十月26日 20:08 UTC](https://meta.discourse.org/t/stick-header-in-proper-scroll-position-when-having-a-custom-fixed-topbar-on-top-of-it/72873 "2017-10-26T20:08:53Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![cfviotti](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cfviotti/32/120609_2.png) [@cfviotti](https://meta.discourse.org/u/cfviotti)\
**Post date:** [2017年十月26日 20:08 UTC](https://meta.discourse.org/t/stick-header-in-proper-scroll-position-when-having-a-custom-fixed-topbar-on-top-of-it/72873/1 "2017-10-26T20:08:53Z")

</div>

We’re having trouble with a custom Discourse instance running inside a Django revproxy application ([https://dev.edemocracia.labhackercd.net/expressao/](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?

---

<div class="post-metadata">

**Author:** ![notriddle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/notriddle/32/133055_2.png) [@notriddle](https://meta.discourse.org/u/notriddle)\
**Post date:** [2017年十月26日 20:15 UTC](https://meta.discourse.org/t/stick-header-in-proper-scroll-position-when-having-a-custom-fixed-topbar-on-top-of-it/72873/2 "2017-10-26T20:15:45Z")

</div>

Add this to your custom CSS:

```css
.d-header {
  position: fixed !important;
  top: 24px !important;
}

```

---

<div class="post-metadata">

**Author:** ![cfviotti](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cfviotti/32/120609_2.png) [@cfviotti](https://meta.discourse.org/u/cfviotti)\
**Post date:** [2017年十月26日 20:22 UTC](https://meta.discourse.org/t/stick-header-in-proper-scroll-position-when-having-a-custom-fixed-topbar-on-top-of-it/72873/3 "2017-10-26T20:22:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![LeoDavidson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/leodavidson/32/119574_2.png) [@LeoDavidson](https://meta.discourse.org/u/LeoDavidson)\
**Post date:** [2017年十月26日 21:01 UTC](https://meta.discourse.org/t/stick-header-in-proper-scroll-position-when-having-a-custom-fixed-topbar-on-top-of-it/72873/4 "2017-10-26T21:01:30Z")

</div>

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](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](https://global.discourse-cdn.com/meta/original/3X/5/3/5356391c4ce6a3ace6d3f0f10daba3d721313920.gif)

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

 ![without_header](https://global.discourse-cdn.com/meta/original/3X/0/c/0c876a90f8591a981c5b224856d81952bfa85dc9.gif)

---

<div class="post-metadata">

**Author:** ![vinothkannans](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vinothkannans/32/86465_2.png) [@vinothkannans](https://meta.discourse.org/u/vinothkannans)\
**Post date:** [2017年十月26日 21:09 UTC](https://meta.discourse.org/t/stick-header-in-proper-scroll-position-when-having-a-custom-fixed-topbar-on-top-of-it/72873/5 "2017-10-26T21:09:41Z")

</div>

> [@Is it possible to change HTML of header and footer and message details on the forum?](https://meta.discourse.org/t/is-it-possible-to-change-html-of-header-and-footer-and-message-details-on-the-forum/66756/9):
>
> I added custom header in ember plugin outlet above-site-header. Then using below simple css I am hiding it when scrolling
> 
> ```plaintext
> .d-header {
> top: auto;
> }
> 
> .docked .d-header {
> top: 0;
> }
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![Tim\_van\_Son](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tim_van_son/32/91448_2.png) [@Tim\_van\_Son](https://meta.discourse.org/u/Tim_van_Son)\
**Post date:** [2018年三月7日 09:30 UTC](https://meta.discourse.org/t/stick-header-in-proper-scroll-position-when-having-a-custom-fixed-topbar-on-top-of-it/72873/6 "2018-03-07T09:30:46Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/f/b/fb63b041097078a5f76c9123d7522cb72be244c9.gif)

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?

---

<div class="post-metadata">

**Author:** ![shaundefense](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shaundefense/32/119563_2.png) [@shaundefense](https://meta.discourse.org/u/shaundefense)\
**Post date:** [2019年三月14日 15:35 UTC](https://meta.discourse.org/t/stick-header-in-proper-scroll-position-when-having-a-custom-fixed-topbar-on-top-of-it/72873/7 "2019-03-14T15:35:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2022年五月2日 16:56 UTC](https://meta.discourse.org/t/stick-header-in-proper-scroll-position-when-having-a-custom-fixed-topbar-on-top-of-it/72873/8 "2022-05-02T16:56:39Z")

</div>