Custom nav header like discourse.org

Getting inspired by
https://meta.discourse.org/t/best-way-to-customize-the-header/13368

I managed to copy https://discourse.org’s main website header (hope you guys don’t mind…).

Go to admin/customize/css_html and add a new customization. You can remove target="_blank" if you don’t want the link to open in a new window. You might not need all the css, but I leave it there as it is what https://discourse.org has ;)

Screens

Here’s how it looks when you copy paste the code below.

And how it looks after some more tweaking to match our theme.

Code

Header

Stylesheet

nav ul { 
    text-align: center;
}

nav ul li { 
    display: inline-block;
}

a:hover {
    transition: color 150ms ease-out 0s;
    color: rgb(44, 174, 195);
}

a {
    transition: color 150ms ease-out 0s;
    color: rgb(35, 137, 153);
}

nav#bar {
    width: 100%;
    height: 48px;
    background: #1b1f20;
    top: 20;
    z-index: 1;
}

nav#bar a.nav-link {
    color: rgb(255, 255, 255);
    text-decoration: none;
    text-align: center;
    font-family: 'Montserrat', sans-serif; 
    line-height: 48px;
    min-width: 90px;
    font-size: 16px;
    float: left;
}

nav#bar a.red.selected {
  color: #d13332;
  border-color: #d13332 !important; }

nav#bar a.red:hover {
  color: #d13332;
  text-shadow: 0px 0px 5px #d13332; }

nav#bar a.orange.selected {
  color: #ea5932;
  border-color: #ea5932 !important; }

nav#bar a.orange:hover {
  color: #ea5932;
  text-shadow: 0px 0px 5px #ea5932; }

nav#bar a.yellow.selected {
  color: #fff9ae;
  border-color: #fff9ae !important; }

nav#bar a.yellow:hover {
  color: #fff9ae;
  text-shadow: 0px 0px 5px #fff9ae; }

nav#bar a.green.selected {
  color: #18b159;
  border-color: #18b159 !important; }

nav#bar a.green:hover {
  color: #18b159;
  text-shadow: 0px 0px 5px #18b159; }

nav#bar a.blue.selected {
  color: #00aeef;
  border-color: #00aeef !important; }

nav#bar a.blue:hover {
  color: #00aeef;
  text-shadow: 0px 0px 5px #00aeef; }

nav#bar a.grey.selected {
  color: #aaa;
  border-color: #aaa !important; }

nav#bar a.grey:hover {
  color: #aaa;
  text-shadow: 0px 0px 5px #aaa; }

nav#bar a.nav-link.selected {
  line-height: 42px;
  border-top: 3px solid #0b0d0d;
  background-color: #0b0d0d;
  height: 45px;
}

Source: https://meta.discourse.org/t/custom-nav-header-like-discourse-org/21053