# Recente update heeft mijn bovenste navigatiebalk gebroken
**URL:** https://meta.discourse.org/t/recent-update-broke-my-top-navigation-bar/168702
**Category:** Support
**Created:** [30 oktober 2020 om 02:27 UTC](https://meta.discourse.org/t/recent-update-broke-my-top-navigation-bar/168702 "2020-10-30T02:27:21Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [30 oktober 2020 om 02:27 UTC](https://meta.discourse.org/t/recent-update-broke-my-top-navigation-bar/168702/1 "2020-10-30T02:27:21Z")
Some recent upgrade broke my top navigation bar - more specifically, the bar loads (it’s visible for a split second) but then the standard discourse header puts istelf on top of it and hides it.
I’m trying to figure out what exactly happened and/or how to fix it. Could someone point me in the right direction?
By inspecting the page in the browser, I figured out that setting
```plaintext
.d-header-wrap {
margin-top: 48px;
}
```
will move the header down to reveal the navbar (which is 48px high) and that seems to have fixed things.
But I’m not sure whether this is a sustainable way of fixing it and I’m also still curious to learn what exactly happened.
I also had to remove
```plaintext
#main-outlet { margin-top: 48px; padding-top: 75px;}
```
from my component in order to remove the additional white space that had appeared under the header. This code has worked fine for years, so I’m curious what caused it to break…
I also removed something else, like
```plaintext
#main-outlet.docked {
margin-top: 0px;
padding-top: 123px
}
```
because it didn’t seem to make a difference.
Edit: The above is true for desktop CSS. On mobile, I did not need to increase the Z value of the Navbar.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [30 oktober 2020 om 02:51 UTC](https://meta.discourse.org/t/recent-update-broke-my-top-navigation-bar/168702/2 "2020-10-30T02:51:15Z")
The header changed from using `position: fixed` to `position: sticky` ([REFACTOR: Remove position fixed from the header and use sticky instea… · discourse/discourse@da5841d · GitHub](https://github.com/discourse/discourse/commit/da5841de0b2b60ceaa2f2602d7231e7393a74e66)) - this is one of the updates we’ve been able to make due to dropping IE11 support.
The change improves some small issues we’ve had with the header since Discourse has existed… what it means functionally is that instead of being in a fixed position (and unrelated to the position of other elements on the page), the header is now part of the natural flow of elements on the page… which is why the main outlet padding and margin are no longer needed.
When the change was initially made there was some extra padding on mobile in the default CSS, but that was fixed a day or two later… I’d guess you updated on the day between the initial change and the fix, if you update it again it should go away (you can alternatively add `.mobile-view #main-outlet { padding-top: 0.25em; }` if you don’t want to update again).
Your fix with `.d-header-wrap` seems sustainable to me.
---
### Author:  [@Mark\_Schmucker](https://meta.discourse.org/u/Mark_Schmucker)
#### Post date: [30 oktober 2020 om 08:08 UTC](https://meta.discourse.org/t/recent-update-broke-my-top-navigation-bar/168702/3 "2020-10-30T08:08:03Z")
See also [Header Submenus - #103 by Mark\_Schmucker](https://meta.discourse.org/t/header-submenus/94584/103). Not sure whether the proposed sustainable fix applies to that, but I think they are related to the same change.
---
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [3 augustus 2021 om 17:15 UTC](https://meta.discourse.org/t/recent-update-broke-my-top-navigation-bar/168702/4 "2021-08-03T17:15:43Z")
> [@awesomerobot](#):
>
> Your fix with `.d-header-wrap` seems sustainable to me.
I just upgraded to latest (2.8.0.beta4) after many months of negilgence and it seems that my fix wasn’t so sustainable (or perhaps the current issue is unrelated to this fix). I’m currently working to figure out what happened and will update here once I know, but if the following strikes a bell for anyone, please let me know.
So basically what happened is the same as described in the OP, except that this time it is not the discourse header covering the top navigation bar ~~but the top navigation bar covering the discourse header~~. (edit: I now believe that the header is not covered but not rendered at all). When I disable the default theme via [safe mode](https://meta.discourse.org/t/53504?silent=true), it displays fine.
Strangely, though, when I navigate to `/admin/customize/themes/11/desktop/scss/edit` both the discourse header and the top navigation bar display correctly (both in [safe mode](https://meta.discourse.org/t/53504?silent=true) and normal mode). I believe the reason why there is no difference between safe and normal mode on the theme page is that [safe mode](https://meta.discourse.org/t/53504?silent=true) doesn’t apply to some of the admin pages. But what I don’t understand is why everything is displayed correctly on the admin pages but not otherwise.
Another thing I don’t understand: when I access the site on my mobile, it also displays correctly, even when I explicitly request the desktop version…
I will investigate further but would appreciate any hints here.
Edit: Here is what I see when I inspect a public page (in normal mode):
And here is what I see when I inspect an admin page (in normal mode):
As you can see, my CSS fix is present in both cases, but only the second one renders the page correctly…
---
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [3 augustus 2021 om 18:26 UTC](https://meta.discourse.org/t/recent-update-broke-my-top-navigation-bar/168702/5 "2021-08-03T18:26:03Z")
OK, I believe I fixed it. The disappearing header was not related to my fix but caused by this theme component:
> [@IFrame Lightboxes](https://meta.discourse.org/t/iframe-lightboxes/89853):
>
> This is a theme component that adds the ability to open iFrames in lightboxes. Samples This component adds an “expand” button on top of the iframes you enable it on. Clicking the button will open the iframe in fullscreen in a lightbox. Clicking either the dark area around the iframe or the x at the top right corner closes the lightbox. The same way it works for default image lightboxes. Settings There’s only one setting. You add the domains…
Removing it made solved the problem. Perhaps @Johani understands what is causing this? Perhaps it is related to the
> Additional control of iframes in oneboxes
introduced in [Discourse Version 2.6 - #2 by neil](https://meta.discourse.org/t/discourse-version-2-6/151394/2)?