# Agregar un encabezado en el tema desordena la barra de progreso del tema (cuando está acoplado)
**URL:** https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393
**Category:** Support
**Created:** [17 Septiembre, 2018 18:44 UTC](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393 "2018-09-17T18:44:58Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@Lew\_Grothe](https://meta.discourse.org/u/Lew_Grothe)
#### Post date: [17 Septiembre, 2018 18:44 UTC](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393/1 "2018-09-17T18:44:58Z")
When we added a header in our theme, on mobile, the toggle where the #topic-progress-wrapper div position is toggled from fixed to absolute, the bottom property is set wrong (doesn’t include the header when calculating the body length).
A little inspection and a [posting](https://meta.discourse.org/t/weird-behavior-of-the-topic-progress-with-a-body-customisation/45258) from @Steven from 2016 provided enough of a solution but I hate leaving CSS cruft like this in our theme.
Seems like wherever the bottom property is calculated dynamically should be able to figure out the correct body length (including header)?
I hate to file this as a bug if I’m just missing something…
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [18 Septiembre, 2018 03:24 UTC](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393/2 "2018-09-18T03:24:09Z")
Can you provide code specifics, maybe @Johani can advise?
---
### Author:  [@Lew\_Grothe](https://meta.discourse.org/u/Lew_Grothe)
#### Post date: [21 Septiembre, 2018 01:30 UTC](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393/3 "2018-09-21T01:30:38Z")
I’ll try - still trying to figure it out as my time for this permits…
All this is inspected on mobile view only…
When reading any topic which is either short or when scrolled to the bottom, the block:
```html
...
```
is changed to
```html
...
```
Obviously, the **bottom:** property is calculated and the **.docked** class changes the **position** property from **fixed** to **absolute**. The **bottom** property seems to be calculated in (in the ember component **discourse/components/topic-progress** pretty-printed from minified in inspector):
```js
_dock: function() {
var e = this.$();
if (e && 0 !== e.length) {
var t = window.pageYOffset || $("html").scrollTop()
, n = this.site.mobileView ? 0 : $("#topic-progress").height()
, i = $("#topic-bottom").offset().top + n
, o = $(window).height()
, s = $("#reply-control").height() || 0
, a = t >= i - o + s
, r = $("#main").height() - i;
s > 0 ? e.css("bottom", a ? r : s) : e.css("bottom", a ? r : ""),
this.set("docked", a);
var l = $("#reply-control .reply-area");
l && l.length > 0 ? e.css("right", l.offset().left + "px") : e.css("right", "1em")
}
},
```
Since this calculates the **bottom** property based on the window height of the **#main** selector, it does not include our header and, hence, the **bottom** property locates the box offset from the desired location.
Could **bottom** be calculated from the **body.docked** selector in this case instead?
(that’s all I have time for today…)
---
### Author:  [@Lew\_Grothe](https://meta.discourse.org/u/Lew_Grothe)
#### Post date: [24 Septiembre, 2018 19:09 UTC](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393/4 "2018-09-24T19:09:11Z")
So, the code in question is:
```js
_dock() {
const $wrapper = this.$();
if (!$wrapper || $wrapper.length === 0) return;
const offset = window.pageYOffset || $("html").scrollTop();
const progressHeight = this.site.mobileView
? 0
: $("#topic-progress").height();
const maximumOffset = $("#topic-bottom").offset().top + progressHeight;
const windowHeight = $(window).height();
const composerHeight = $("#reply-control").height() || 0;
const isDocked = offset >= maximumOffset - windowHeight + composerHeight;
const bottom = $("#main").height() - maximumOffset;
if (composerHeight > 0) {
$wrapper.css("bottom", isDocked ? bottom : composerHeight);
} else {
$wrapper.css("bottom", isDocked ? bottom : "");
}
this.set("docked", isDocked);
const $replyArea = $("#reply-control .reply-area");
if ($replyArea && $replyArea.length > 0) {
$wrapper.css("right", `${$replyArea.offset().left}px`);
} else {
$wrapper.css("right", "1em");
}
},
```
I have proven to myself that, in my case, changing
```js
const bottom = $("#main").height() - maximumOffset;
```
to
```js
const bottom = $("body").height() - maximumOffset;
```
works perfectly for our site.
I can imagine that you may want to not presume the **body** element selector would work in all cases so a _perhaps_ more elegant solution would be to wrap the theme (brand?) header in a **div** that could be selected such that you could replace the bottom calculation with something like:
```js
const bottom = ((($("#brand_header").height() + $("#main").height()) - maximumOffset;
```
Suggestions? Where can we go from here?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [24 Septiembre, 2018 20:13 UTC](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393/5 "2018-09-24T20:13:13Z")
Is your instance public? I tried to follow your code description, but this would be easier to track down if I could inspect your site. (For example, I added [this component](https://meta.discourse.org/t/brand-header-theme-component/77977) to a test site and couldn’t find any issues with the progress bar on mobile.)
---
### Author:  [@Lew\_Grothe](https://meta.discourse.org/u/Lew_Grothe)
#### Post date: [25 Septiembre, 2018 00:03 UTC](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393/6 "2018-09-25T00:03:38Z")
It’s not public but I will PM you a login on our test site and pull all our special code out of the theme…
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [25 Septiembre, 2018 01:52 UTC](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393/7 "2018-09-25T01:52:56Z")
Thanks @Lew_Grothe, I do see the issue now. There are two lines of code that cause this when using a theme header, first:
```plaintext
const maximumOffset = $("#topic-bottom").offset().top + progressHeight;
```
`offset.top` here gets the element’s position from the top of the _document_. Later in the code, the position of the progress bar is calculated based on the height of `#main` minus said offset:
```plaintext
const bottom = $("#main").height() - maximumOffset;
```
But when adding an element to the body before `#main`, the offset will be misaligned with `#main`. I will prepare a PR tomorrow and propose to target the `body` element, as you suggest, it makes sense to me.
---
### Author:  [@Lew\_Grothe](https://meta.discourse.org/u/Lew_Grothe)
#### Post date: [29 Septiembre, 2018 00:49 UTC](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393/8 "2018-09-29T00:49:59Z")
Any guess as to what release this might be in?
---
### Author:  [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [29 Septiembre, 2018 03:26 UTC](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393/9 "2018-09-29T03:26:34Z")
Whenever this PR is merged 😉
[https://github.com/discourse/discourse/pull/6425](https://github.com/discourse/discourse/pull/6425)
**EDIT:** this PR is now merged
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [29 Octubre, 2018 03:26 UTC](https://meta.discourse.org/t/adding-header-in-theme-messes-up-topic-progress-bar-when-docked/97393/10 "2018-10-29T03:26:39Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.