diff --git a/docs-orange/_includes/boostwatch/navLocal.html b/docs-orange/_includes/boostwatch/navLocal.html
index 73ec3719c0..20d3eff579 100644
--- a/docs-orange/_includes/boostwatch/navLocal.html
+++ b/docs-orange/_includes/boostwatch/navLocal.html
@@ -17,8 +17,8 @@ <h3 id="local1">Default local navigation</h3>
               <!-- Collect the nav links, forms, and other content for toggling -->
               <div class="collapse navbar-toggleable-xs local" id="exCollapsingNavbar1">
                 <ul class="nav navbar-nav">
-                  <li class="active nav-item"><a href="#">Voluptatem</a><div class='arrow' aria-hidden='true'></div></li>
-                  <li class="nav-item"><a href="#">Unde omnis istea</a><div class='arrow' aria-hidden='true'></div></li>
+                  <li class="nav-item"><a class="nav-link active" href="#">Voluptatem<div class='arrow' aria-hidden='true'></div></a></li>
+                  <li class="nav-item"><a class="nav-link" href="#">Unde omnis istea<div class='arrow' aria-hidden='true'></div></a></li>
                   <li class="nav-item dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu1">Dropdown <b class="caret" aria-hidden="true"></b></a>
                     <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
@@ -31,7 +31,7 @@ <h3 id="local1">Default local navigation</h3>
                   </li>
                 </ul>
                 <ul class="nav navbar-nav pull-md-right">
-                  <li class="nav-item"><a href="#">Accusantium</a><div class='arrow' aria-hidden='true'></div></li>
+                  <li class="nav-item"><a class="nav-link" href="#">Accusantium<div class='arrow' aria-hidden='true'></div></a></li>
                   <li class="nav-item dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu1">Dropdown <b class="caret" aria-hidden="true"></b></a>
                     <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
@@ -67,8 +67,8 @@ <h3 id="local2">Two levels local navigation</h3>
           <!-- Local nav with 2 level : 1st level -->
           <div class="collapse navbar-toggleable-xs local" id="exCollapsingNavbar2">
               <ul class="nav navbar-nav">
-                  <li class="active nav-item"><a href="#">Voluptatem</a><div class='arrow' aria-hidden='true'></div></li>
-                  <li class="nav-item"><a href="#">Unde omnis istea</a><div class='arrow' aria-hidden='true'></div></li>
+                  <li class="nav-item"><a class="nav-link active" href="#">Voluptatem<div class='arrow' aria-hidden='true'></div></a></li>
+                  <li class="nav-item"><a class="nav-link" href="#">Unde omnis istea<div class='arrow' aria-hidden='true'></div></a></li>
               </ul>
               <ul class="nav navbar-nav pull-md-right">
                   <li class="nav-item dropdown">
@@ -87,10 +87,10 @@ <h3 id="local2">Two levels local navigation</h3>
           <!-- Local nav with 2 level : 2nd level. Be careful about small devices, this component is not completely adapted -->
           <div class="navbar-collapse sublocal">
               <ul class="nav navbar-nav">
-                  <li class="nav-item"><a href="#">Natus error sit</a><div class='arrow' aria-hidden='true'></div></li>
-                  <li class="nav-item"><a href="#">Accusantium</a><div class='arrow' aria-hidden='true'></div></li>
-                  <li class="nav-item active"><a href="#">Totam rem aperiam</a><div class='arrow' aria-hidden='true'></div></li>
-                  <li class="nav-item"><a href="#">Sed ut</a><div class='arrow' aria-hidden='true'></div></li>
+                  <li class="nav-item"><a class="nav-link" href="#">Natus error sit<div class='arrow' aria-hidden='true'></div></a></li>
+                  <li class="nav-item"><a class="nav-link" href="#">Accusantium<div class='arrow' aria-hidden='true'></div></a></li>
+                  <li class="nav-item"><a class="nav-link active" href="#">Totam rem aperiam<div class='arrow' aria-hidden='true'></div></a></li>
+                  <li class="nav-item"><a class="nav-link" href="#">Sed ut<div class='arrow' aria-hidden='true'></div></a></li>
               </ul>
           </div>
         <!--</div>-->
diff --git a/docs-orange/_includes/boostwatch/navTab.html b/docs-orange/_includes/boostwatch/navTab.html
index b32608a1f4..579daf53fa 100644
--- a/docs-orange/_includes/boostwatch/navTab.html
+++ b/docs-orange/_includes/boostwatch/navTab.html
@@ -87,10 +87,10 @@ <h3 id="tab-clear">Content without border</h3>
 			<h3 id="tabB">Orange pointed tabs</h3>
 		</div>
 		<ul class="nav nav-tabs o-nav-tabs">
-			<li class="nav-item"><a class="nav-link active" href="#home2" data-toggle="tab">Home</a></li>
-			<li class="nav-item"><a class="nav-link" href="#profile2" data-toggle="tab">Profile</a></li>
-			<li class="nav-item"><a class="nav-link" href="#messages2" data-toggle="tab">Messages</a></li>
-			<li class="nav-item"><a class="nav-link" href="#settings2" data-toggle="tab">Settings</a></li>
+			<li class="nav-item"><a class="nav-link active" href="#home2" data-toggle="tab">Home<div class="arrow" aria-hidden="true"></div></a></li>
+			<li class="nav-item"><a class="nav-link" href="#profile2" data-toggle="tab">Profile<div class="arrow" aria-hidden="true"></div></a></li>
+			<li class="nav-item"><a class="nav-link" href="#messages2" data-toggle="tab">Messages<div class="arrow" aria-hidden="true"></div></a></li>
+			<li class="nav-item"><a class="nav-link" href="#settings2" data-toggle="tab">Settings<div class="arrow" aria-hidden="true"></div></a></li>
 		</ul>
 		<div class="tab-content o-nav-tabs-content">
 			<div class="tab-pane active" id="home2">Lorem ipsum dolor sit
diff --git a/docs-orange/examples/orange-news/index.html b/docs-orange/examples/orange-news/index.html
index 8e99d7b431..795ca41b2a 100644
--- a/docs-orange/examples/orange-news/index.html
+++ b/docs-orange/examples/orange-news/index.html
@@ -207,23 +207,21 @@ <h1>News</h1>
             </div>
 
             <div id="localNavigation" class="container">
-			<nav  class="navbar navbar-default nav-local" role="navigation" role="navigation">
-				<div class="navbar-header">
-					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
-						<span class="sr-only">toggle navigation</span>
-						<span class="icon-bar"></span>
-					</button>
-				</div>
-
-				<div class="collapse navbar-collapse local" id="bs-example-navbar-collapse-2">
+			<nav  class="navbar nav-local" role="navigation">
+				<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
+					<span class="sr-only">toggle navigation</span>
+					<span class="icon-bar"></span>
+				</button>
+
+				<div class="collapse navbar-toggleable-xs local" id="bs-example-navbar-collapse-2">
 					<ul class="nav navbar-nav">
-						<li class="active"><a href="#">news home</a><div class='arrow' aria-hidden='true'></div></li>
-						<li><a href="#">world</a><div class='arrow' aria-hidden='true'></div></li>
-						<li><a href="#">entertainment</a><div class='arrow' aria-hidden='true'></div></li>
-						<li><a href="#">finance</a><div class='arrow' aria-hidden='true'></div></li>
-						<li><a href="#">technology</a><div class='arrow' aria-hidden='true'></div></li>
-						<li><a href="#">weather</a><div class='arrow' aria-hidden='true'></div></li>
-						<li class="dropdown">
+						<li class="nav-item"><a class="nav-link active" href="#">news home<div class='arrow' aria-hidden='true'></div></a></li>
+						<li class="nav-item"><a class="nav-link" href="#">world<div class='arrow' aria-hidden='true'></div></a></li>
+						<li class="nav-item"><a class="nav-link" href="#">entertainment<div class='arrow' aria-hidden='true'></div></a></li>
+						<li class="nav-item"><a class="nav-link" href="#">finance<div class='arrow' aria-hidden='true'></div></a></li>
+						<li class="nav-item"><a class="nav-link" href="#">technology<div class='arrow' aria-hidden='true'></div></a></li>
+						<li class="nav-item"><a class="nav-link" href="#">weather<div class='arrow' aria-hidden='true'></div></a></li>
+						<li class="nav-item dropdown">
 							<a href="#" class="dropdown-toggle active" data-toggle="dropdown"><span class="sr-only">more categories </span>... <b class="caret" aria-hidden="true"></b></a>
 							<ul class="dropdown-menu">
 								<li><a href="#">sport</a></li>
@@ -232,8 +230,8 @@ <h1>News</h1>
 							</ul>
 						</li>
 					</ul>
-					<ul class="nav navbar-nav navbar-right">
-						<li class="dropdown">
+					<ul class="nav navbar-nav pull-md-right">
+						<li class="nav-item dropdown">
 							<a href="#" class="dropdown-toggle" data-toggle="dropdown">more <span class="sr-only">options</span><b class="caret" aria-hidden="true"></b></a>
 							<ul class="dropdown-menu">
 								<li><a href="#">all categories</a></li>
@@ -406,10 +404,10 @@ <h2>news 6</h2>
 
 
 				<div id="infos" class="col-xs-12 col-sm-12 col-md-4">
-					<ul class="nav nav-tabs nav-tabs-justified o-nav-tabs">
-						<li class="active"><a href="#mostRead" data-toggle="tab">Most read</a><div class="arrow" aria-hidden="true"></div></li>
-						<li><a href="#mostShared" data-toggle="tab">Most shared</a><div class="arrow" aria-hidden="true"></div></li>
-						<li><a href="#mostRecent" data-toggle="tab">Most recent</a><div class="arrow" aria-hidden="true"></div></li>
+					<ul class="nav nav-tabs o-nav-tabs">
+						<li class="nav-item"><a class="nav-link active" href="#mostRead" data-toggle="tab">Most read<div class="arrow" aria-hidden="true"></div></a></li>
+						<li class="nav-item"><a class="nav-link" href="#mostShared" data-toggle="tab">Most shared<div class="arrow" aria-hidden="true"></div></a></li>
+						<li class="nav-item"><a class="nav-link" href="#mostRecent" data-toggle="tab">Most recent<div class="arrow" aria-hidden="true"></div></a></li>
 					</ul>
 					<!-- Tab panes -->
 					<div class="tab-content o-nav-tabs-content">
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 7cc75a952c..d83441fab5 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -26,8 +26,7 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc
 
 - `.navbar-brand` for your company, product, or project name
 - `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
-- `.navbar-form` for vertically centering default-sized inputs and buttons.
-- `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors.
+- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsing-content) behaviors.
 
 Here's an example of all the sub-components included in a default, light navbar:
 
@@ -35,8 +34,8 @@ Here's an example of all the sub-components included in a default, light navbar:
 <nav class="navbar navbar-light bg-faded">
   <a class="navbar-brand" href="#">Navbar</a>
   <ul class="nav navbar-nav">
-    <li class="nav-item active">
-      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+    <li class="nav-item">
+      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Features</a>
@@ -48,13 +47,65 @@ Here's an example of all the sub-components included in a default, light navbar:
       <a class="nav-link" href="#">About</a>
     </li>
   </ul>
-  <form class="form-inline navbar-form pull-xs-right">
+  <form class="form-inline pull-xs-right">
     <input class="form-control" type="text" placeholder="Search">
     <button class="btn btn-success-outline" type="submit">Search</button>
   </form>
 </nav>
 {% endexample %}
 
+### Brand
+
+The `.navbar-brand` can be applied to most elements, but an anchor works best.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Navbar</a>
+</nav>
+
+<nav class="navbar navbar-light bg-faded">
+  <h1 class="navbar-brand">Navbar</h1>
+</nav>
+
+{% endexample %}
+
+### Nav
+
+Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <ul class="nav navbar-nav">
+    <li class="nav-item">
+      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Features</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Pricing</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">About</a>
+    </li>
+  </ul>
+</nav>
+{% endexample %}
+
+And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <div class="nav navbar-nav">
+    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
+    <a class="nav-item nav-link" href="#">Features</a>
+    <a class="nav-item nav-link" href="#">Pricing</a>
+    <a class="nav-item nav-link" href="#">About</a>
+  </div>
+</nav>
+{% endexample %}
+
+
 ## Color schemes
 
 Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.
@@ -65,8 +116,8 @@ Here are some examples to show what we mean.
   <nav class="navbar navbar-dark bg-inverse">
     <a class="navbar-brand" href="#">Navbar</a>
     <ul class="nav navbar-nav">
-      <li class="nav-item active">
-        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      <li class="nav-item">
+        <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Features</a>
@@ -78,7 +129,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline navbar-form pull-xs-right">
+    <form class="form-inline pull-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-info-outline" type="submit">Search</button>
     </form>
@@ -86,8 +137,8 @@ Here are some examples to show what we mean.
   <nav class="navbar navbar-dark bg-primary">
     <a class="navbar-brand" href="#">Navbar</a>
     <ul class="nav navbar-nav">
-      <li class="nav-item active">
-        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      <li class="nav-item">
+        <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Features</a>
@@ -99,7 +150,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline navbar-form pull-xs-right">
+    <form class="form-inline pull-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-secondary-outline" type="submit">Search</button>
     </form>
@@ -107,8 +158,8 @@ Here are some examples to show what we mean.
   <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
     <a class="navbar-brand" href="#">Navbar</a>
     <ul class="nav navbar-nav">
-      <li class="nav-item active">
-        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      <li class="nav-item">
+        <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Features</a>
@@ -120,7 +171,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline navbar-form pull-xs-right">
+    <form class="form-inline pull-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-primary-outline" type="submit">Search</button>
     </form>
@@ -143,7 +194,7 @@ Here are some examples to show what we mean.
 
 ## Containers
 
-Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of the navbar.
+Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of a [fixed or static top navbar](#placement).
 
 {% example html %}
 <div class="container">
@@ -190,7 +241,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
 
 {% example html %}
 <div class="collapse" id="exCollapsingNavbar">
-  <div class="bg-inverse p-a">
+  <div class="bg-inverse p-a-1">
     <h4>Collapsed content</h4>
     <span class="text-muted">Toggleable via the navbar brand.</span>
   </div>
@@ -212,8 +263,8 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
   <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
     <a class="navbar-brand" href="#">Responsive navbar</a>
     <ul class="nav navbar-nav">
-      <li class="nav-item active">
-        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      <li class="nav-item">
+        <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Features</a>
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index ffe133b9f0..b67196b1fc 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -180,8 +180,6 @@
       }
     }
 
-    .open > .nav-link,
-    .active > .nav-link,
     .nav-link.open,
     .nav-link.active {
       @include plain-hover-focus {
@@ -214,8 +212,6 @@
       }
     }
 
-    .open > .nav-link,
-    .active > .nav-link,
     .nav-link.open,
     .nav-link.active {
       @include plain-hover-focus {
diff --git a/scss/_o-nav-local.scss b/scss/_o-nav-local.scss
index 6964ddd3e5..8aae4331d3 100644
--- a/scss/_o-nav-local.scss
+++ b/scss/_o-nav-local.scss
@@ -4,7 +4,7 @@
 
 // mixin for arrows
 @mixin arrow-generic($arrow-outer-width, $arrow-width) {
-    > li.active > .arrow {
+    >.nav-item > .nav-link.active > .arrow {
         &,
         &::after {
         position: absolute;
@@ -16,11 +16,11 @@
         }
     }
 
-    > li.active > .arrow {
+    >.nav-item > .nav-link.active > .arrow {
       border-width: $arrow-outer-width;
     }
 
-    > li.active > .arrow::after {
+    >.nav-item > .nav-link.active > .arrow::after {
       content: '';
       border-width: $arrow-width;
     }
@@ -28,7 +28,7 @@
 
 @mixin arrow-bottom($arrow-outer-width, $arrow-outer-height, $arrow-width, $arrow-outer-color, $arrow-color, $focus-color) {
     @include arrow-generic($arrow-outer-width, $arrow-width);
-    > li.active > .arrow {
+    >.nav-item > .nav-link.active > .arrow {
         bottom: $arrow-outer-height;
         left: 50%;
         margin-left: -$arrow-outer-width;
@@ -44,7 +44,7 @@
         }
     }
 
-    > li.active a:focus {
+    >.nav-item > .nav-link.active a:focus {
         border-color: $focus-color;
 
         +.arrow {
@@ -60,7 +60,7 @@
 @mixin arrow-top($arrow-outer-width, $arrow-outer-height, $arrow-width, $arrow-outer-color, $arrow-color, $focus-color) {
     @include arrow-generic($arrow-outer-width, $arrow-width);
 
-    > li.active > .arrow {
+    >.nav-item > .nav-link.active > .arrow {
         bottom: $arrow-outer-height;
         left: 50%;
         margin-left: -$arrow-outer-width;
@@ -76,7 +76,7 @@
         }
     }
 
-    > li.active a:focus {
+    >.nav-item > .nav-link.active a:focus {
         border-color: $focus-color;
 
         +.arrow {
@@ -115,18 +115,18 @@
                     padding: 1rem 0;
                     margin-top: 0;
                     color: $brand-orange-black;
-                }
-
-                &.active > a,
-                > a:hover,
-                > a:focus {
-                    color: $brand-orange;
-                    background-color: transparent;
-                }
 
-                > a:hover,
-                > a:focus {
-                    text-decoration: underline;
+                    &.active,
+                    &:hover,
+                    &:focus {
+                        color: $brand-orange;
+                        background-color: transparent;
+                    }
+
+                    &:hover,
+                    &:focus {
+                        text-decoration: underline;
+                    }
                 }
 
                 .dropdown-menu {
diff --git a/scss/_o-pointed_tab.scss b/scss/_o-pointed_tab.scss
index 7c0e062436..bdc77f7821 100644
--- a/scss/_o-pointed_tab.scss
+++ b/scss/_o-pointed_tab.scss
@@ -5,6 +5,8 @@
 
 .o-nav-tabs {
   @include box-shadow(0 5px 10px rgba(0, 0, 0, .2));
+  @include arrow-bottom($o-nav-tabs-arrow-outer-width, -$o-nav-tabs-arrow-outer-height, $o-nav-tabs-arrow-width, $o-nav-tabs-arrow-outer-color, $o-nav-tabs-arrow-color, $o-nav-tabs-arrow-color);
+
   position: relative;
   font-family: $font-family-base;
   font-size: $font-size-base;
diff --git a/scss/_o-variables.scss b/scss/_o-variables.scss
index fcdadef0f7..69fb8a40a7 100644
--- a/scss/_o-variables.scss
+++ b/scss/_o-variables.scss
@@ -528,7 +528,7 @@ $o-nav-tabs-active-color: $brand-orange-white;
 //** o-nav-tabs outer arrow width
 $o-nav-tabs-arrow-outer-width:           ($o-nav-tabs-arrow-width + 1);
 //** o-nav-tabs outer arrow height
-$o-nav-tabs-arrow-outer-height:           ($o-nav-tabs-arrow-height + 1);
+$o-nav-tabs-arrow-outer-height:           ($o-nav-tabs-arrow-height + 3);
 //** o-nav-tabs outer arrow color
 $o-nav-tabs-arrow-outer-color:           fadein($o-nav-tabs-border-color, 0%);