Recent update broke my top navigation bar

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

.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

#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

#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.

2 Likes

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) - 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.

5 Likes

See also Header submenus. Not sure whether the proposed sustainable fix applies to that, but I think they are related to the same change.

1 Like