diff --git a/docs-orange/_includes/nav-home.html b/docs-orange/_includes/nav-home.html
index 8037e47bf8..630c0db133 100644
--- a/docs-orange/_includes/nav-home.html
+++ b/docs-orange/_includes/nav-home.html
@@ -1,53 +1,22 @@
-<header class="navbar navbar-dark navbar-static-top bd-navbar" role="banner">
-  <div class="container">
-  {% comment %}
-  <nav class="nav navbar-nav pull-xs-right">
-    <div class="nav-item dropdown">
-      <a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        v{{ site.current_version }}
-      </a>
-      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
-        <a class="dropdown-item" href="#">v4.0.0-alpha</a>
-        <a class="dropdown-item" href="#">v3.3.5</a>
-        <a class="dropdown-item" href="#">v3.3.4</a>
-        <a class="dropdown-item" href="#">v3.3.2</a>
-        <a class="dropdown-item" href="#">v3.3.1</a>
-        <a class="dropdown-item" href="#">v3.3.0</a>
-        <a class="dropdown-item" href="#">v3.2.0</a>
-        <a class="dropdown-item" href="#">v3.1.1</a>
-        <a class="dropdown-item" href="#">v3.1.0</a>
-        <a class="dropdown-item" href="#">v3.0.3</a>
-        <a class="dropdown-item" href="#">v3.0.2</a>
-        <a class="dropdown-item" href="#">v3.0.1</a>
-        <a class="dropdown-item" href="#">v3.0.0</a>
+<header class="" role="banner">
+  <nav class="navbar navbar-dark">
+      <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
+          <span class="sr-only">toggle navigation</span>
+          <span class="icon-menu"></span>
+      </button>
+      <div class="container" >
+          <a class="navbar-brand"><img src="../../dist/img/ORANGE_LOGO_rgb.jpg" alt='Back to homepage' title='Back to homepage'/></a>
+          <ul class="nav navbar-nav collapse navbar-toggleable-xs" id="collapsingNavbar">
+              <li class="nav-item">
+                <a class="nav-link" href="{{ site.baseurl }}/">
+                  B<span class="text-primary">oo</span>sted
+                </a>
+              </li>
+              <li class="nav-item"><a class="nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/">Documentation</a></li>
+              <li class="nav-item"><a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/">Examples</a></li>
+              <li class="nav-item"><a class="nav-link {% if page.title == "Boostwatch" %}active{% endif %}" href="{{ site.baseurl }}/boostwatch/">Boostwatch</a></li>
+              <li class="nav-item" id="id_li_for_cdu"></li>
+          </ul>
       </div>
-    </div>
   </nav>
-  {% endcomment %}
-
-  <div class="clearfix">
-    <button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
-      &#9776;
-    </button>
-    <a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
-      B<span class="text-primary">oo</span>sted
-    </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'/>
-    </a>
-    <ul class="nav navbar-nav">
-      <li class="nav-item">
-        <a class="nav-link" href="{{ site.baseurl }}/">
-          B<span class="text-primary">oo</span>sted
-        </a>
-      </li>
-      <li class="nav-item"><a class="nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/">Documentation</a></li>
-      <li class="nav-item"><a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/">Examples</a></li>
-      <li class="nav-item"><a class="nav-link {% if page.title == "Boostwatch" %}active{% endif %}" href="{{ site.baseurl }}/boostwatch/">Boostwatch</a></li>
-      <li class="nav-item" id="id_li_for_cdu"></li>
-    </ul>
-  </nav>
-  </div>
 </header>
diff --git a/docs-orange/assets/scss/_boosted-docs.scss b/docs-orange/assets/scss/_boosted-docs.scss
index e513a460cb..cbc42e5861 100644
--- a/docs-orange/assets/scss/_boosted-docs.scss
+++ b/docs-orange/assets/scss/_boosted-docs.scss
@@ -45,26 +45,31 @@
   background-color: #000;
   color: #fff;
   border-top: 2px solid $gray-dark;
-  padding-top: 3.75rem;
-  padding-bottom: 3.75rem;
-
-  @include media-breakpoint-up(md) {
-    h1 {
-      font-size: $font-size-h1;
-    }
-
-    p {
-      font-size: $font-size-base;
-    }
-  }
+  padding: 0;
 
   h1 {
     font-size: $font-size-h1;
+    font-weight: bold;
+    margin: 2.6875rem 0;
   }
 
   p {
     font-size: $font-size-base;
   }
+
+  @include media-breakpoint-down(xs) {
+    h1 {
+      font-size: $font-size-h2;
+      font-weight: bold;
+      text-align: left;
+      line-height: 1;
+      margin: 1.25rem 0;
+    }
+
+    p {
+      font-size: $font-size-base;
+    }
+  }
 }
 
 .bd-featurette {
@@ -220,9 +225,6 @@ $back-top-btn-height: 3.75rem;
   body {
       margin-bottom: $back-top-btn-height;
   }
-  .container {
-    margin: 0 .625rem;
-  }
 }
 
 .scroll-top {
diff --git a/scss/_o-navbar.scss b/scss/_o-navbar.scss
index ee6af46162..ccf517d384 100644
--- a/scss/_o-navbar.scss
+++ b/scss/_o-navbar.scss
@@ -135,6 +135,23 @@
   .navbar {
     min-height: $navbar-height-sm;
 
+    .navbar-toggler {
+      float: right;
+      padding: .875rem;
+      font-size: 1.25rem;
+      background-color: transparent;
+      background-image: none;
+      border: 0;
+
+      @include hover-focus {
+        background-color: $brand-primary;
+      }
+
+      &:focus {
+        outline: 0;
+      }
+    }
+
     .container {
       max-width: none;
       margin: 0;
@@ -152,14 +169,16 @@
       .nav-item {
         display: block;
         float: none;
-        padding: calc((#{$font-size-h1} - #{$font-size-h5}) / 2) 0;
+        padding: 1rem 0;
         padding-left: .625rem;
         margin-left: 0;
         font-size: $font-size-h5;
         line-height: 1;
         border-top: 1px solid $gray-dark;
 
-        .nav-link {
+        .nav-link,
+        .dropdown-toggle,
+        .nav-item-cdu {
           margin-top: 0;
         }
 
@@ -173,6 +192,10 @@
           content: "\e93e";
         }
 
+        .nav-link.active::before {
+          display: none;
+        }
+
         .nav-link.icon {
           padding: .625rem;
           margin-top: 0;
@@ -181,6 +204,10 @@
         &:first-child {
           margin-left: 0;
         }
+
+        .nav-item-cdu {
+          float: none;
+        }
       }
 
       .nav-item.folded {
@@ -226,23 +253,10 @@
 
 }
 
-.navbar-toggler {
-  padding: .625rem;
-  font-size: calc(#{$font-size-h4} - 1px);
-  background-color: transparent;
-  background-image: none;
-  border: 0;
 
-  @include hover-focus {
-    background-color: $brand-primary;
-  }
 
   // We remove the `outline` here, but later compensate by attaching `:hover`
   // styles to `:focus`.
-  &:focus {
-    outline: 0;
-  }
-}
 
 .navbar-brand {
   @include focus {
@@ -280,24 +294,24 @@
   padding-left: $navbar-padding-horizontal;
 }
 
-.navbar-toggle-complement {
-  position: relative;
-  float: right;
-}
+// .navbar-toggle-complement {
+//   position: relative;
+//   float: right;
+// }
 
-.navbar-toggle-complement .navbar-nav {
-  margin: $padding-base-vertical 0 0;
-}
+// .navbar-toggle-complement .navbar-nav {
+//   margin: $padding-base-vertical 0 0;
+// }
 
-.navbar-toggle-complement li {
-  float: left;
-}
+// .navbar-toggle-complement li {
+//   float: left;
+// }
 
-@include media-breakpoint-up(md) {
-  .navbar-toggle-complement {
-    display: none;
-  }
-}
+// @include media-breakpoint-up(md) {
+//   .navbar-toggle-complement {
+//     display: none;
+//   }
+// }
 
 // Navbar nav links
 //