diff --git a/docs-orange/_includes/boostwatch/navbar.html b/docs-orange/_includes/boostwatch/navbar.html
index 218a259ee6..ce8b93d13e 100644
--- a/docs-orange/_includes/boostwatch/navbar.html
+++ b/docs-orange/_includes/boostwatch/navbar.html
@@ -1,42 +1,84 @@
 <h2 id="navbar">Navbar<a class="doc-link" href="../components/navbar/" title="go to navbar documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
 <nav class="navbar navbar-dark bg-faded">
-<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar3">
-    &#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"></a>
-    <ul class="nav navbar-nav">
-        <li class="nav-item">
-            <a class="nav-link active" href="#">Active <span class="sr-only">(current)</span></a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-        </li>
-        <li class="nav-item dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu3">Dropdown <b class="caret" aria-hidden="true"></b></a>
-            <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
-            <a href="#" role="menuitem" class="dropdown-item">Action</a>
-            <a href="#" role="menuitem" class="dropdown-item">Another action</a>
-            <a href="#" role="menuitem" class="dropdown-item">Something else here</a>
-            <div class="dropdown-divider"></div>
-            <a href="#" role="menuitem" class="dropdown-item">Separated link</a>
+    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar3">
+        &#9776;
+    </button>
+    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar3">
+        <a class="navbar-brand logo" 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>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu3">Dropdown <b class="caret" aria-hidden="true"></b></a>
+                <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
+                <a href="#" role="menuitem" class="dropdown-item">Action</a>
+                <a href="#" role="menuitem" class="dropdown-item">Another action</a>
+                <a href="#" role="menuitem" class="dropdown-item">Something else here</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" role="menuitem" class="dropdown-item">Separated link</a>
+                </div>
+            </li>
+        </ul>
+        <ul class="nav navbar-nav pull-md-right">
+            <li class="nav-item">
+                <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu4">Dropdown <b class="caret" aria-hidden="true"></b></a>
+                <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
+                <a href="#" role="menuitem" class="dropdown-item">Action</a>
+                <a href="#" role="menuitem" class="dropdown-item">Another action</a>
+                <a href="#" role="menuitem" class="dropdown-item">Something else here</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" role="menuitem" class="dropdown-item">Separated link</a>
             </div>
         </li>
-    </ul>
-    <ul class="nav navbar-nav pull-md-right">
-        <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
+        </ul>
+    </div>
+</nav>
+<h3>without logo</h3>
+<nav class="navbar navbar-dark bg-faded">
+    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar3">
+        &#9776;
+    </button>
+    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar3">
+        <a class="navbar-brand" href="#">Navbar brand</a>
+        <ul class="nav navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link active" href="#">Active <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu3">Dropdown <b class="caret" aria-hidden="true"></b></a>
+                <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
+                <a href="#" role="menuitem" class="dropdown-item">Action</a>
+                <a href="#" role="menuitem" class="dropdown-item">Another action</a>
+                <a href="#" role="menuitem" class="dropdown-item">Something else here</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" role="menuitem" class="dropdown-item">Separated link</a>
+                </div>
+            </li>
+        </ul>
+        <ul class="nav navbar-nav pull-md-right">
+            <li class="nav-item">
+                <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu4">Dropdown <b class="caret" aria-hidden="true"></b></a>
+                <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
+                <a href="#" role="menuitem" class="dropdown-item">Action</a>
+                <a href="#" role="menuitem" class="dropdown-item">Another action</a>
+                <a href="#" role="menuitem" class="dropdown-item">Something else here</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" role="menuitem" class="dropdown-item">Separated link</a>
+            </div>
         </li>
-        <li class="nav-item dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu4">Dropdown <b class="caret" aria-hidden="true"></b></a>
-            <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
-            <a href="#" role="menuitem" class="dropdown-item">Action</a>
-            <a href="#" role="menuitem" class="dropdown-item">Another action</a>
-            <a href="#" role="menuitem" class="dropdown-item">Something else here</a>
-            <div class="dropdown-divider"></div>
-            <a href="#" role="menuitem" class="dropdown-item">Separated link</a>
-        </div>
-    </li>
-    </ul>
-</div>
+        </ul>
+    </div>
 </nav>
diff --git a/docs-orange/_includes/nav-home.html b/docs-orange/_includes/nav-home.html
index ac4a05f0f0..afcc6d88e3 100644
--- a/docs-orange/_includes/nav-home.html
+++ b/docs-orange/_includes/nav-home.html
@@ -5,7 +5,7 @@
           <span class="icon-menu"></span>
       </button>
       <div class="container" >
-          <a class="navbar-brand" href="{{ site.baseurl }}/"><img src="dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"/></a>
+          <a class="navbar-brand logo" 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 collapse navbar-toggleable-xs" id="collapsingNavbar">
               <li class="nav-item">
                 <a class="nav-link" href="{{ site.baseurl }}/">
diff --git a/docs-orange/assets/scss/_boosted-docs.scss b/docs-orange/assets/scss/_boosted-docs.scss
index 6532d1ef29..a0897ffc74 100644
--- a/docs-orange/assets/scss/_boosted-docs.scss
+++ b/docs-orange/assets/scss/_boosted-docs.scss
@@ -167,6 +167,7 @@
 #supported-content,
 #color-schemes,
 #placement,
+#collapsible-content,
 #sizing {
     @include brand-warning;
 }
diff --git a/docs-orange/components/navbar-orange.md b/docs-orange/components/navbar-orange.md
index 732cc99c00..2177a57687 100644
--- a/docs-orange/components/navbar-orange.md
+++ b/docs-orange/components/navbar-orange.md
@@ -23,27 +23,13 @@ Orange navbar is the main navigation of project website. It should always be inc
             <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>
+            <a class="navbar-brand logo"><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="collapsingNavbar3">
                 <li class="nav-item"><a class="nav-link" href="#">Discover</a></li>
                 <li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
                 <li class="nav-item"><a href="#" class="nav-link">My Orange</a></li>
                 <li class="nav-item"><a href="#" class="nav-link">Help</a></li>
             </ul>
-            <ul class="nav navbar-nav pull-xs-right">
-                <li class="nav-item">
-                    <a href="#" class="nav-link icon">
-                        <span class="sr-only">open basket</span>
-                        <span class="icon-buy" aria-hidden="true"></span>
-                    </a>
-                </li>
-                <li class="nav-item">
-                    <a href="#" class="nav-link icon">
-                        <span class="sr-only">open search bar</span>
-                        <span class="icon-search" aria-hidden="true"></span>
-                    </a>
-                </li>
-            </ul>
         </div>
     </nav>
 </header>
@@ -130,27 +116,13 @@ A supra bar should never be used on its own and always be included in header and
             <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>
+            <a class="navbar-brand logo"><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="collapsingNavbar2">
                 <li class="nav-item"><a class="nav-link" href="#">Discover</a></li>
                 <li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
                 <li class="nav-item"><a href="#" class="nav-link">My Orange</a></li>
                 <li class="nav-item"><a href="#" class="nav-link">Help</a></li>
             </ul>
-            <ul class="nav navbar-nav pull-xs-right">
-                <li class="nav-item">
-                    <a href="#" class="nav-link icon">
-                        <span class="sr-only">open basket</span>
-                        <span class="icon-buy" aria-hidden="true"></span>
-                    </a>
-                </li>
-                <li class="nav-item">
-                    <a href="#" class="nav-link icon">
-                        <span class="sr-only">open search bar</span>
-                        <span class="icon-search" aria-hidden="true"></span>
-                    </a>
-                </li>
-            </ul>
         </div>
     </nav>
 </header>
diff --git a/docs-orange/examples/orange-brand-2015/index.html b/docs-orange/examples/orange-brand-2015/index.html
index ef0267078a..d61289f03d 100644
--- a/docs-orange/examples/orange-brand-2015/index.html
+++ b/docs-orange/examples/orange-brand-2015/index.html
@@ -40,7 +40,7 @@
                 <span class="icon-bar"></span>
             </button>
             <div class="collapse navbar-toggleable-xs" id="orange-navbar-collapse">
-                <a class="navbar-brand" href="/"><img src="../../dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"/></a>
+                <a class="navbar-brand logo" href="/"><img src="../../dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"/></a>
                 <ul class="nav navbar-nav" role="tablist">
                     <li role="presentation" class="nav-item">
                         <a class="nav-link active" href="#">Discover<span class="sr-only">(current)</span></a>
@@ -98,7 +98,7 @@
                         <div class="title ">You can use any hero picture to illustrate your purpose insert your body text in here. Ommoditatur sendand amusanti nobisci psandae dolupta tatur, con corrum sam fugitatiunt aliae pa doluptatur sit aut alite excerei ctasimin. </div>
                     </div>
                 </div>
-                <div class="carousel-item">                    
+                <div class="carousel-item">
                     <img src="./images/offset_LARGE_123305_chemisier_jaune.jpg" alt=""  class="img-fluid"/>
                     <div class="frame">
                         <img src="./images/Fun-frame_frame-carousel.png" alt="Fun"  class="img-fluid"/>
diff --git a/docs-orange/examples/orange-dashboard/index.html b/docs-orange/examples/orange-dashboard/index.html
index a65313fec8..87252300d9 100644
--- a/docs-orange/examples/orange-dashboard/index.html
+++ b/docs-orange/examples/orange-dashboard/index.html
@@ -73,7 +73,7 @@
                 </button>
 				<!-- Collect the nav links, forms, and other content for toggling -->
 				<div class="collapse navbar-toggleable-xs" id="bs-example-navbar-collapse-1">
-                    <a class="navbar-brand" href="#">
+                    <a class="navbar-brand logo" href="#">
 						<img id="orange_logo" src="images/logo-orange.png" alt=""/>
 						<span id="app_name">APP&NAME <span class="sr-only">Homepage</span></span>
 					</a>
diff --git a/docs-orange/examples/orange-form/index.html b/docs-orange/examples/orange-form/index.html
index 29bb7af792..2a3642ad39 100644
--- a/docs-orange/examples/orange-form/index.html
+++ b/docs-orange/examples/orange-form/index.html
@@ -39,7 +39,7 @@
           </button>
   				<!-- Collect the nav links, forms, and other content for toggling -->
   				<div class="collapse navbar-toggleable-xs" id="bs-example-navbar-collapse-1">
-                      <a class="navbar-brand" href="#">
+                      <a class="navbar-brand logo" href="#">
   						<img id="orange_logo" src="images/logo-orange.png" alt=""/>
   						<span id="app_name">APP&NAME <span class="sr-only">Homepage</span></span>
   					</a>
diff --git a/docs-orange/examples/orange-news/index.html b/docs-orange/examples/orange-news/index.html
index 2666e42fac..4e8274b3fd 100644
--- a/docs-orange/examples/orange-news/index.html
+++ b/docs-orange/examples/orange-news/index.html
@@ -69,12 +69,12 @@
             </nav>
 
             <nav class="navbar navbar-dark">
-                <!--<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
+                <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>-->
+                </button>
                 <div class="container" >
-                    <a class="navbar-brand"><img src="images/logo-orange.jpg" alt="Back to homepage" title="Back to homepage"/></a>
+                    <a class="navbar-brand logo"><img src="images/logo-orange.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="#collapseDiscover" data-parent="#collapsingNavbar" data-toggle="collapse" aria-expanded="false" aria-controls="collapseDiscover" title="open discover menu">Discover</a></li>
                         <li class="nav-item"><a class="nav-link" data-parent="#collapsingNavbar" data-toggle="collapse" href="#collapseShop" aria-expanded="false" aria-controls="collapseShop" title="open shop menu">Shop</a></li>
@@ -82,7 +82,7 @@
                         <li class="nav-item"><a href="#" class="nav-link">Help</a></li>
                         <li class="nav-item" id="id_li_for_cdu"></li>
                     </ul>
-                    <ul class="nav navbar-nav pull-xs-right">
+                    <!--<ul class="nav navbar-nav pull-xs-right">
                         <li class="nav-item">
                             <a href="#" class="nav-link icon">
                                 <span class="sr-only">open basket</span>
@@ -101,7 +101,7 @@
                                 <span class="icon-menu" aria-hidden="true"></span>
                             </a>
                         </li>
-                    </ul>
+                    </ul>-->
                 </div>
             </nav>
         </header>
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 98e48fa77a..6fcca7804c 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -237,6 +237,10 @@ Navbars can be statically placed (their default behavior), static without rounde
 
 ## Collapsible content
 
+<!--- boosted mod -->
+For brand responsive collapsible navbar please checkout the [Navbar Orange](/components/navbar-orange/) page.
+<!--- end mod -->
+
 Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
 
 {% example html %}
diff --git a/scss/_o-navbar.scss b/scss/_o-navbar.scss
index c542ed714f..cb3634a253 100644
--- a/scss/_o-navbar.scss
+++ b/scss/_o-navbar.scss
@@ -22,13 +22,56 @@
 
   .navbar-toggleable-xs {
     position: static;
+    // display: inline-block !important;
     width: auto;
   }
 
+  .navbar-toggler {
+    color: #fff;
+  }
+
+  .navbar-brand {
+    @include focus {
+      outline: none;
+
+      img {
+        outline: 1px dotted #fff;
+        outline-offset: .625rem;
+      }
+    }
+
+    padding: 0;
+    margin-top: 3.75rem;
+    font-size: 1rem;
+    font-weight: bold;
+    line-height: 1;
+    color: $brand-primary;
+
+    &.logo {
+      padding-top: 1.5625rem;
+      padding-bottom: 1.5625rem;
+      margin: 0;
+    }
+
+    &.nav-link {
+      margin: 0;
+    }
+
+    img {
+      width: auto;
+      height: 3.125rem;
+      font-size: 1rem;
+      font-weight: bold;
+      line-height: 5.25rem;
+      color: $brand-primary;
+    }
+  }
+
   .nav-item {
     font-weight: bold;
 
-    .nav-link {
+    > .nav-link,
+    &.nav-link {
       padding: 0;
       margin-top: 3.75rem;
       line-height: $btn-line-height;
@@ -159,7 +202,7 @@
 
     .navbar-toggler {
       float: right;
-      padding: .875rem;
+      padding: .9375rem .9375rem .875rem;
       font-size: 1.25rem;
       color: $navbar-dark-color;
       background-color: transparent;
@@ -181,6 +224,15 @@
       }
     }
 
+    .navbar-brand.logo {
+      padding: calc(#{$navbar-height-sm} / 4) 0;
+      margin-right: .625rem;
+
+      img {
+        height: calc(#{$navbar-height-sm} / 2);
+      }
+    }
+
     .container {
       max-width: none;
       margin: 0;
@@ -264,7 +316,12 @@
         margin-left: 0;
       }
 
-      .nav-link {
+      > .nav-link,
+      &.nav-link {
+        @include focus {
+          outline: 0;
+        }
+
         padding: 0;
         margin-top: 0;
 
@@ -282,68 +339,11 @@
 
 }
 
-
-.navbar-brand {
-  @include focus {
-    outline: none;
-
-    img {
-      outline: 1px dotted #fff;
-      outline-offset: .625rem;
-    }
-  }
-  padding-top: 1.5625rem;
-  padding-bottom: 1.5625rem;
-  margin: 0;
-
-  &.nav-link {
-    margin: 0;
-  }
-
-  img {
-    width: auto;
-    height: 3.125rem;
-    font-size: .75rem;
-    font-weight: normal;
-    color: #fff;
-  }
-}
-
-.navbar-brand {
-  @include media-breakpoint-down(xs) {
-    padding: calc(#{$navbar-height-sm} / 4) 0;
-    margin-right: .625rem;
-
-    img {
-      height: calc(#{$navbar-height-sm} / 2);
-    }
-  }
-}
-
 .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;
-// }
-
-// @include media-breakpoint-up(md) {
-//   .navbar-toggle-complement {
-//     display: none;
-//   }
-// }
-
 // Navbar nav links
 //
 // Builds on top of the `.nav` components with its own modifier class to make