diff --git a/docs-orange/_includes/boostwatch/navbar.html b/docs-orange/_includes/boostwatch/navbar.html
index c2208c5dc8..d6da1a96dd 100644
--- a/docs-orange/_includes/boostwatch/navbar.html
+++ b/docs-orange/_includes/boostwatch/navbar.html
@@ -6,7 +6,7 @@ <h2 id="navbar" class="">Navbar</h2>
         &#9776;
     </button>
     <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar3">
-        <a class="navbar-brand" href="#"><img src="../dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage" width="48px"></a>
+        <a class="navbar-brand" href="#"><img src="../dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"></a>
         <ul class="nav navbar-nav">
             <li class="nav-item">
                 <a class="nav-link active" href="#">Active <span class="sr-only">(current)</span></a>
diff --git a/docs-orange/_includes/nav-home.html b/docs-orange/_includes/nav-home.html
index 252a25bff0..6364bb4f7b 100644
--- a/docs-orange/_includes/nav-home.html
+++ b/docs-orange/_includes/nav-home.html
@@ -34,12 +34,10 @@
     </a>
   </div>
   <nav class="collapse navbar-toggleable-xs" id="bd-main-nav">
+    <a class="navbar-brand" href="{{ site.baseurl }}/">
+        <img src="dist/img/ORANGE_LOGO_rgb.jpg" alt='Back to homepage' title='Back to homepage' width='48px'/>
+    </a>
     <ul class="nav navbar-nav">
-      <li class="nav-item">
-        <a class="navbar-brand" href="{{ site.baseurl }}/">
-          <img src="dist/img/ORANGE_LOGO_rgb.jpg" alt='Back to homepage' title='Back to homepage' width='48px'/>
-        </a>
-      </li>
       <li class="nav-item">
         <a class="nav-link" href="{{ site.baseurl }}/">
           B<span class="text-primary">oo</span>sted
diff --git a/img/ORANGE_LOGO_rgb.jpg b/img/ORANGE_LOGO_rgb.jpg
index c240a11361..1f02c46bd0 100644
Binary files a/img/ORANGE_LOGO_rgb.jpg and b/img/ORANGE_LOGO_rgb.jpg differ
diff --git a/scss/_o-navbar.scss b/scss/_o-navbar.scss
new file mode 100644
index 0000000000..04f146b5ee
--- /dev/null
+++ b/scss/_o-navbar.scss
@@ -0,0 +1,176 @@
+// Orange navbar
+//
+//
+
+.navbar {
+  padding: 0;
+  height: 10rem;
+  font-size: $font-size-base;
+
+  &.navbar-light,
+  &.navbar-dark {
+    color: $brand-orange-white;
+    background: $brand-orange-black;
+  }
+
+  .nav-item {
+    font-weight: $brand-font-weight-bold;
+
+    .nav-link {
+        padding: 0;
+        line-height: $btn-line-height;
+        margin-top: 5.9rem;
+    }
+
+    .dropdown-toggle {
+      @include hover-focus {
+        color: $brand-orange;
+      }
+      display: block;
+    //   padding-top: .425rem;
+    //   padding-bottom: 1rem;
+      line-height: $btn-line-height;
+      margin-top: 5.9rem;
+      color: $brand-orange-white;
+    }
+  }
+
+  .nav-item + .nav-item {
+    margin-left: 2rem;
+  }
+
+  .nav-item:first-child {
+    margin-left: 3rem;
+  }
+
+  .form-inline {
+    margin-top: 3.5rem;
+    margin-left: 1rem;
+  }
+
+  .btn-inverse-outline {
+    @include hover-focus {
+      color: $brand-orange;
+      border-color: $brand-orange;
+    }
+
+    @include active {
+      color: $brand-orange-white;
+      background-color: $brand-orange;
+      border-color: $brand-orange;
+    }
+
+    color: $brand-orange-white;
+    background-color: $brand-orange-black;
+    border-color: $brand-orange-white;
+  }
+}
+
+.navbar-toggler {
+  @include navbar-toggle-vertical-align($navbar-toggle-vertical-margin);
+  padding: $nav-link-padding;
+  margin-right: $navbar-padding-horizontal;
+  background-color: transparent;
+  background-image: none;
+  border: 1px solid transparent;
+  border-radius: $border-radius;
+
+  @include hover-focus {
+    background-color: $brand-orange;
+  }
+
+  // We remove the `outline` here, but later compensate by attaching `:hover`
+  // styles to `:focus`.
+  &:focus {
+    outline: 0;
+  }
+
+  // Bars
+  .icon-bar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    border-radius: 1px;
+  }
+
+  .icon-bar + .icon-bar {
+    margin-top: 4px;
+  }
+
+  @media (min-width: $grid-float-breakpoint) {
+    display: none;
+  }
+}
+
+.navbar-brand {
+//   height: $navbar-height;
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+  margin: 0;
+
+  &.nav-link {
+    margin: 0;
+  }
+
+  img {
+    font-size: 1.2rem;
+    font-weight: $brand-font-weight-normal;
+    color: $brand-orange-white;
+    height: 5rem;
+    width: auto;
+  }
+}
+
+.navbar-header {
+  padding-right: $navbar-padding-horizontal;
+  padding-left: $navbar-padding-horizontal;
+}
+
+.navbar-toggle-complement {
+  position: relative;
+  float: right;
+}
+
+.navbar-toggle-complement .navbar-nav {
+  margin: $padding-base-vertical 0 0;
+}
+
+.navbar-toggle-complement li {
+  float: left;
+}
+
+@media (min-width: $screen-sm) {
+  .navbar-toggle-complement {
+    display: none;
+  }
+}
+
+// Navbar nav links
+//
+// Builds on top of the `.nav` components with its own modifier class to make
+// the nav the full height of the horizontal nav (above 768px).
+.navbar-nav {
+  .nav-item-cdu {
+    float: left;
+    padding: .425rem 0 1rem;
+    margin-top: 2.8rem;
+    font-weight: $brand-font-weight-bold;
+    color: $brand-orange-white !important;
+
+    @include hover-focus {
+      color: $brand-orange !important;
+    }
+  }
+  // Uncollapse the nav
+  @media (min-width: $grid-float-breakpoint) {
+    .nav-link {
+      margin-top: 2.8rem;
+    }
+  }
+
+  > li {
+    > a {
+      font-size: $font-size-base;
+    }
+  }
+}
\ No newline at end of file
diff --git a/scss/_orange-css.scss b/scss/_orange-css.scss
index 10b0038897..fdff3679f9 100644
--- a/scss/_orange-css.scss
+++ b/scss/_orange-css.scss
@@ -37,167 +37,7 @@ html {
 // Navbar
 //
 
-.navbar {
-  padding: 0;
 
-  &.navbar-light,
-  &.navbar-dark {
-    color: $brand-orange-white;
-    background: $brand-orange-black;
-  }
-
-  .nav-item {
-    font-weight: $brand-font-weight-bold;
-
-    .nav-link {
-      padding-bottom: 1rem;
-      margin-top: 2.8rem;
-    }
-
-    .dropdown-toggle {
-      @include hover-focus {
-        color: $brand-orange;
-      }
-      display: block;
-      padding-top: .425rem;
-      padding-bottom: 1rem;
-      margin-top: 2.8rem;
-      color: $brand-orange-white;
-    }
-  }
-
-  .nav-item + .nav-item {
-    margin-left: 2rem;
-  }
-
-  .form-inline {
-    margin-top: 1.8rem;
-    margin-left: 1rem;
-  }
-
-  .btn-inverse-outline {
-    @include hover-focus {
-      color: $brand-orange;
-      border-color: $brand-orange;
-    }
-
-    @include active {
-      color: $brand-orange-white;
-      background-color: $brand-orange;
-      border-color: $brand-orange;
-    }
-
-    color: $brand-orange-white;
-    background-color: $brand-orange-black;
-    border-color: $brand-orange-white;
-  }
-}
-
-.navbar-toggler {
-  @include navbar-toggle-vertical-align($navbar-toggle-vertical-margin);
-  padding: $nav-link-padding;
-  margin-right: $navbar-padding-horizontal;
-  background-color: transparent;
-  background-image: none;
-  border: 1px solid transparent;
-  border-radius: $border-radius;
-
-  @include hover-focus {
-    background-color: $brand-orange;
-  }
-
-  // We remove the `outline` here, but later compensate by attaching `:hover`
-  // styles to `:focus`.
-  &:focus {
-    outline: 0;
-  }
-
-  // Bars
-  .icon-bar {
-    display: block;
-    width: 22px;
-    height: 2px;
-    border-radius: 1px;
-  }
-
-  .icon-bar + .icon-bar {
-    margin-top: 4px;
-  }
-
-  @media (min-width: $grid-float-breakpoint) {
-    display: none;
-  }
-}
-
-.navbar-brand {
-  height: $navbar-height;
-  padding: 1rem;
-  margin: 0;
-
-  &.nav-link {
-    margin: 0;
-  }
-
-  img {
-    font-size: 1.2rem;
-    font-weight: $brand-font-weight-normal;
-    color: $brand-orange-white;
-  }
-}
-
-.navbar-header {
-  padding-right: $navbar-padding-horizontal;
-  padding-left: $navbar-padding-horizontal;
-}
-
-.navbar-toggle-complement {
-  position: relative;
-  float: right;
-}
-
-.navbar-toggle-complement .navbar-nav {
-  margin: $padding-base-vertical 0 0;
-}
-
-.navbar-toggle-complement li {
-  float: left;
-}
-
-@media (min-width: $screen-sm) {
-  .navbar-toggle-complement {
-    display: none;
-  }
-}
-
-// Navbar nav links
-//
-// Builds on top of the `.nav` components with its own modifier class to make
-// the nav the full height of the horizontal nav (above 768px).
-.navbar-nav {
-  .nav-item-cdu {
-    float: left;
-    padding: .425rem 0 1rem;
-    margin-top: 2.8rem;
-    font-weight: $brand-font-weight-bold;
-    color: $brand-orange-white !important;
-
-    @include hover-focus {
-      color: $brand-orange !important;
-    }
-  }
-  // Uncollapse the nav
-  @media (min-width: $grid-float-breakpoint) {
-    .nav-link {
-      margin-top: 2.8rem;
-    }
-  }
-
-  > li {
-    > a {
-      font-size: $navbar-font-size;
-    }
-  }
-}
 
 .nav {
   // Open dropdowns
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index b659b2fee5..366f8252d4 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -61,6 +61,7 @@
 @import "o-bullet_points";
 @import "o-step_bar";
 @import "o-main_megamenu";
+@import "o-navbar";
 @import "o-nav-local";
 @import "o-accordion";
 @import "o-tablesorter";