So OpenMRS uses a global navigation bar and I upgraded to the latest c3ceb6ef7d0886a0165df5354042c6588ac4b7e5 and noticed that our globalnav bar covers the our header, see below:
Anybody have any insight into some CSS fixes that potentially help mitigate this?
Fairly certain this is due to the custom CSS, not a bug. Can you post your custom CSS?
/* Discourse UI hacks */
@import "theme_variables";
button#create-topic { background: #5B57A6; color: $secondary; }
a.title:visited { color: $primary !important; }
a.card-badge img, div.pref-card-badge img { max-height: 50px; }
body:not(.category-dev) ul#devbanner { display: none; }
body.category-dev ul#devbanner { list-style-type: none; background-color: #EEE; padding: 0.3em; margin: 0 0 0.3em 0;}
body.category-dev ul#devbanner li:first-child:before { content: "\f0e4"; color: #AAA; font-size: 1.5em; font-family: FontAwesome; margin: 0 0.5em 0 0.2em; }
body.category-dev ul#devbanner li { font-size: 0.8em; font-family: 'Roboto', sans-serif; text-transform: uppercase; color: #666; font-weight: bold; display: inline; margin-right: 0.5em;}
div#banner-content {
background-image:url('/uploads/default/original/2X/5/58a192714f97537129964da0b9d2cac5384e53a4.png');
background-size: 100px 100px;
height: 100px;
background-repeat: no-repeat;
padding-left: 110px; /* width of the image plus a little extra padding */
display: block; /* may not need this, but I've found I do */
}
a.user-group[href*=ThoughtWorks]:after {
background-image: url('/uploads/default/original/2X/2/285156720ca5c6a2c3c371594fe4fe0dd452a97e.png');
background-size: 90px 15px; display: inline-block; width: 90px; height: 15px; content:""; margin-left: 10px; vertical-align: middle;
}
a.user-group[href*=PIH]:after {
background-image: url('/uploads/default/original/2X/4/4b9afca2f6cf1a1b4ac4234fcc136a32f906fc56.png');
background-size: 138px 15px; display: inline-block; width: 138px; height: 15px; content:""; margin-left: 10px; vertical-align: middle;
}
a.user-group[href*=Regenstrief]:after {
background-image: url('/uploads/default/optimized/2X/0/07459d2b59b7358697eed46077dd967d174a23cc_1_690x103.png');
background-size: 100px 15px; display: inline-block; width: 100px; height: 15px; content:""; margin-left: 10px; vertical-align: middle;
}
a.user-group[href*=SolDevelo]:after {
background-image: url('/uploads/default/original/2X/9/996b48aec573cac40156a233e5171559453c35c4.png');
background-size: 62px 15px; display: inline-block; width: 62px; height: 15px; content:""; margin-left: 10px; vertical-align: middle;
}
a.user-group[href*=UWash]:after {
background-image: url('/uploads/default/original/2X/9/95707f5086a4b72a7ffb5f0cca88ef5e2399265f.png');
background-size: 73px 15px; display: inline-block; width: 73px; height: 15px; content:""; margin-left: 10px; vertical-align: middle;
}
a.user-group[href*=Guide]:after { content: "\f14e\00a0\00a0GUIDE"; padding-right: 0.4em; font-weight: normal; font-family: FontAwesome; font-size: 0.8em; color: #F26522; padding: 0.1em 0.5em 0.1em 0.5em; border: 1px solid; margin-left: 0.5em; vertical-align: middle; }
span.moderator i:after { content: "\f132"; background-color: #CCC; display: inline-block; color: #777; font-family: FontAwesome; font-size: 1em; font-weight: bold; padding: 0.4em; vertical-align: middle; }
span.moderator i:before { display: none; }
span.username, span.full-name, span.user-title { vertical-align: middle; }
/* Fonts */
body { background-size: initial !important; font-family: 'Roboto', sans-serif; font-weight: 400; }
h1, div.topic-meta-data, td.main-link a.title { font-family: 'Open Sans', sans-serif; }
div.topic-excerpt { font-size: 0.75em !important; }
a.mention-group { font-family: monospace; color: #5B57A6;}
a.hashtag { font-family: monospace; color: #aa965d; background: #fdfddb; border-radius: 8px; padding: 2px 4px; }
/* Header & font positioning hacks */
#topic-title h1 { line-height: 1.3em; }
h1 a.topic-link { line-height: 1.3em; font-weight: 400; }
.d-header #site-logo { max-width:250px !important; }
/* Ask OpenMRS - Solved Button hacks */
p.solved { background-color: #DFD; padding: 5px; }
div.accepted-answer div.row div.topic-avatar:after { content: "\f058"; font-family: FontAwesome; color: $success; font-size: 48px; top: 100px; position: absolute; }
body.category-ask div.topic-statuses i.fa-check-square-o, span.accepted-text { color: $success; }
body.category-ask button#create-topic { color: transparent; }
body.category-ask button#create-topic i { color: $secondary; }
body.category-ask button#create-topic:after { content: "New Question"; color: $secondary; margin-left: -80px; }
button.unaccepted i { color: #1cf601;}
/* Site About page */
.about span.username { display: none; }
.about span.name { margin-left: 0px !important; }
/* Hover stuff */
span.username a:hover, span.full-name a:hover, div.post-info a.post-date:hover { background-color: #dbf3ff !important; }
div.topic-avatar a:hover img.avatar { border: 5px solid #dbf3ff; margin: -5px 0 0 -5px; }
/* Whispers */
div.whisper article { background-color: #faf697; }
/* Footer */
footer:not(.topic-list-bottom) { text-align: center; font-size: 0.85em; }
/* User Profile page: GitHub ID */
div.primary-textual { padding-left: 150px !important; }
div.public-user-field:nth-child(1) span.user-field-name:before { content: "\f113"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: #FFF; font-size: 18px; padding-right: 0.5em; position: relative; top: 0px; left: 0; }
/* Community */
div.public-user-field:nth-child(2) span.user-field-name:before { content: "\f21e"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: #FFF; font-size: 18px; padding-right: 0.5em; position: relative; top: 0px; left: 0; }
/* Category listing page */
td.category img.category-logo { display: none; }
/* Navbar Chat Icons */
ul.nav-pills li:nth-last-child(2) a:before { content: "\f0e6"; padding-right: 0.5em; font-family: FontAwesome; position: relative; }
ul.nav-pills li:nth-last-child(1) a:before { content: "\f1d9"; padding-right: 0.5em; font-family: FontAwesome; position: relative; }
/* Avatar Icons */
Any insight? 
That commit you link to is definitely not the cause, the cause is the fact that .d-header is using position:fixed, due to getting the class docked
This seems related to this change by @eviltrout (maybe he can look deeper, but it seems to be due to getting a class of docked when you shouldn’t… ?)
https://github.com/discourse/discourse/commit/fa2bffd618f1b5336cb9ba0f4e0dd74780f8edc5
I know – i just linked to the latest I updated to 
I’m gonna update and see if it fixes things…
I can confirm that removing
position: fixed;
from d-header fixes it
PR coming
I don’t think you want to do that PR, the position:fixed is intential for when you are scrolling down the topic list/reading a topic. Without it, the header will scroll out of view. What needs to happen is it shouldn’t apply docked when you are at the very top.
Any tips on how to fix this @cpradio?
Yes, if you view the examineDockHeader at this point
https://github.com/discourse/discourse/blob/208cf41e6c75de2b9187319c4d617b12d83f3d78/app/assets/javascripts/discourse/components/site-header.js.es6#L25-L50
And compare it to dockCheck at
https://github.com/discourse/discourse/blob/fa2bffd618f1b5336cb9ba0f4e0dd74780f8edc5/app/assets/javascripts/discourse/components/site-header.js.es6#L23-L43
You will see it doesn’t seem to be utilizing the window.pageYOffset check and the $('html').scrollTop() check anymore. That seems to be the cause to applying the docked class inappropriately (if I had to venture a guess).
It’s weird – if I scroll – our navbar just goes away 
I was wondering if that was intentional or not. I didn’t dig into why that was happening, but I imagine it may be for similar reasons.
I think this should be moved back to bug because it’s not our fault, it’s the fault…and definitely is a bug…
Yeah, the docked class thing is definitely a bug, the disappearing on scroll… well, that is due to the custom CSS using position: relative on your header, that will definitely scroll with page scrolling. You’d have to use position:fixed and remove the margin: -27px 0 0 to stop it from scrolling off screen.
Should note that HTG’s header disappears whilst scrolling and his site is before the CSS changes I linked to previously, so that tells me if you want a static header to show all of the time, you have to modify your CSS to make that happen.
So update: The CSS quirk only appears in discourse and it’s recent – all of OpenMRS’ other services show the navbar correctly…so not sure what to do from here…I’m at a loss
I don’t understand. When I visit the main site, scrolling makes that top gray header disappear… It doesn’t remain fixed. Or are you still refering to the docked class, which is definitely a bug related to the timeline changes (so it seems)
I assume you’re talking about this – but yes I am referring to the docked class which causes the navbar to overlay the header…the disappearing when it scrolls is something i don’t really feel like dealing with. It works fine and as we want it…but on discourse, it fails…this is a recent thing when I updated
Can confirm that this is fixed. THANK YOU!