Slight CSS bug when using a custom global navigation bar

(Robby O'Connor) #1

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?

(cpradio) #2

Fairly certain this is due to the custom CSS, not a bug. Can you post your custom CSS?

(Robby O'Connor) #3
/* 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-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 { margin-left: 0px !important; }

/* Hover stuff */
span.username a:hover, span.full-name a: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 */

(Robby O'Connor) #4

Any insight? :frowning2:

(cpradio) #5

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… ?)

(Robby O'Connor) #6

I know – i just linked to the latest I updated to :slight_smile: I’m gonna update and see if it fixes things…

(Robby O'Connor) #7

I can confirm that removing

position: fixed; 

from d-header fixes it

PR coming

(cpradio) #8

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.

(Robby O'Connor) #9

Any tips on how to fix this @cpradio?

(cpradio) #10

Yes, if you view the examineDockHeader at this point

And compare it to dockCheck at

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

(Robby O'Connor) #11

It’s weird – if I scroll – our navbar just goes away :frowning:

(cpradio) #12

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.

(Robby O'Connor) #13

I think this should be moved back to #bug because it’s not our fault, it’s the fault…and definitely is a bug…

(cpradio) #14

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.

(Robby O'Connor) #15

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 :frowning:

(cpradio) #16

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)

(Robby O'Connor) #17

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 :frowning:

(Robby O'Connor) #18

Can confirm that this is fixed. THANK YOU!

(Jeff Atwood) #19