# Slight CSS bug when using a custom global navigation bar
**URL:** https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109
**Category:** Bug
**Created:** [June 1, 2016, 9:43pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109 "2016-06-01T21:43:28Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@robbyoconnor](https://meta.discourse.org/u/robbyoconnor)
#### Post date: [June 1, 2016, 9:43pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/1 "2016-06-01T21:43:28Z")
So OpenMRS uses a global navigation bar and I upgraded to the latest [c3ceb6ef7d0886a0165df5354042c6588ac4b7e5](https://github.com/discourse/discourse/commit/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?
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 1, 2016, 9:44pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/2 "2016-06-01T21:44:44Z")
Fairly certain this is due to the custom CSS, not a bug. Can you post your custom CSS?
---
### Author:  [@robbyoconnor](https://meta.discourse.org/u/robbyoconnor)
#### Post date: [June 1, 2016, 9:48pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/3 "2016-06-01T21:48:01Z")
```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 */
```
---
### Author:  [@robbyoconnor](https://meta.discourse.org/u/robbyoconnor)
#### Post date: [June 1, 2016, 10:02pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/4 "2016-06-01T22:02:48Z")
Any insight? ☹
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 1, 2016, 10:05pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/5 "2016-06-01T22:05:35Z")
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](https://github.com/discourse/discourse/commit/fa2bffd618f1b5336cb9ba0f4e0dd74780f8edc5)
---
### Author:  [@robbyoconnor](https://meta.discourse.org/u/robbyoconnor)
#### Post date: [June 1, 2016, 10:06pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/6 "2016-06-01T22:06:16Z")
I know – i just linked to the latest I updated to 🙂 I’m gonna update and see if it fixes things…
---
### Author:  [@robbyoconnor](https://meta.discourse.org/u/robbyoconnor)
#### Post date: [June 1, 2016, 10:14pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/7 "2016-06-01T22:14:34Z")
I can confirm that removing
```css
position: fixed;
```
from d-header fixes it
PR coming
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 1, 2016, 10:23pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/8 "2016-06-01T22:23:15Z")
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.
---
### Author:  [@robbyoconnor](https://meta.discourse.org/u/robbyoconnor)
#### Post date: [June 1, 2016, 10:24pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/9 "2016-06-01T22:24:04Z")
Any tips on how to fix this @cpradio?
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 1, 2016, 10:26pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/10 "2016-06-01T22:26:59Z")
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).
---
### Author:  [@robbyoconnor](https://meta.discourse.org/u/robbyoconnor)
#### Post date: [June 1, 2016, 10:28pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/11 "2016-06-01T22:28:04Z")
It’s weird – if I scroll – our navbar just goes away ☹
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 1, 2016, 10:29pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/12 "2016-06-01T22:29:05Z")
> [@robbyoconnor](#):
>
> 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.
---
### Author:  [@robbyoconnor](https://meta.discourse.org/u/robbyoconnor)
#### Post date: [June 1, 2016, 10:31pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/13 "2016-06-01T22:31:01Z")
I think this should be moved back to #Contribute > Bug because it’s not our fault, it’s the fault…and definitely is a bug…
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 1, 2016, 10:33pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/14 "2016-06-01T22:33:25Z")
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](https://discuss.howtogeek.com/) 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.
---
### Author:  [@robbyoconnor](https://meta.discourse.org/u/robbyoconnor)
#### Post date: [June 2, 2016, 12:43am UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/15 "2016-06-02T00:43:02Z")
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 ☹
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 2, 2016, 12:50am UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/16 "2016-06-02T00:50:40Z")
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)
---
### Author:  [@robbyoconnor](https://meta.discourse.org/u/robbyoconnor)
#### Post date: [June 2, 2016, 1:39am UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/17 "2016-06-02T01:39:06Z")
I assume you’re talking about [this](http://talk.openmrs.org) – 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](http://talk.openmrs.org), it fails…this is a recent thing when I updated ☹
---
### Author:  [@robbyoconnor](https://meta.discourse.org/u/robbyoconnor)
#### Post date: [June 4, 2016, 11:24pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/18 "2016-06-04T23:24:47Z")
Can confirm that this is fixed. **THANK YOU!**
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 4, 2016, 11:47pm UTC](https://meta.discourse.org/t/slight-css-bug-when-using-a-custom-global-navigation-bar/45109/19 "2016-06-04T23:47:33Z")