Fix navbar colors

docs/_includes/examples/navbar-color.html

@@ -1,7 +1,11 @@
 <nav class="navbar is-{{ include.color }}">
   <div class="navbar-brand">
     <a class="navbar-item" href="{{ site.url }}">
-      <img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
+      {% if include.light %}
+        <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
+      {% else %}
+        <img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
+      {% endif %}
     </a>
     <div class="navbar-burger burger" data-target="navMenuColor{{ include.color }}-example">
       <span></span>

docs/css/bulma-docs.css

@@ -5629,20 +5629,30 @@ a.nav-item:not(.button).is-tab.is-active {
   color: #0a0a0a;
 }
 
+.navbar.is-white .navbar-brand > .navbar-item,
+.navbar.is-white .navbar-brand .navbar-link {
+  color: #0a0a0a;
+}
+
+.navbar.is-white .navbar-brand > a.navbar-item:hover, .navbar.is-white .navbar-brand > a.navbar-item.is-active,
+.navbar.is-white .navbar-brand .navbar-link:hover,
+.navbar.is-white .navbar-brand .navbar-link.is-active {
+  background-color: #f2f2f2;
+  color: #0a0a0a;
+}
+
+.navbar.is-white .navbar-brand .navbar-link::after {
+  border-color: #0a0a0a;
+}
+
 @media screen and (min-width: 1024px) {
-  .navbar.is-white .navbar-brand > .navbar-item,
-  .navbar.is-white .navbar-brand .navbar-link,
   .navbar.is-white .navbar-start > .navbar-item,
   .navbar.is-white .navbar-start .navbar-link,
   .navbar.is-white .navbar-end > .navbar-item,
   .navbar.is-white .navbar-end .navbar-link {
     color: #0a0a0a;
   }
-  .navbar.is-white .navbar-brand > a.navbar-item:hover, .navbar.is-white .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-white .navbar-start > a.navbar-item:hover, .navbar.is-white .navbar-start > a.navbar-item.is-active,
-  .navbar.is-white .navbar-brand .navbar-link:hover,
-  .navbar.is-white .navbar-brand .navbar-link.is-active,
-  .navbar.is-white .navbar-start > a.navbar-item:hover,
-  .navbar.is-white .navbar-start > a.navbar-item.is-active,
   .navbar.is-white .navbar-start .navbar-link:hover,
   .navbar.is-white .navbar-start .navbar-link.is-active,
   .navbar.is-white .navbar-end > a.navbar-item:hover,
@@ -5652,7 +5662,6 @@ a.nav-item:not(.button).is-tab.is-active {
     background-color: #f2f2f2;
     color: #0a0a0a;
   }
-  .navbar.is-white .navbar-brand .navbar-link::after,
   .navbar.is-white .navbar-start .navbar-link::after,
   .navbar.is-white .navbar-end .navbar-link::after {
     border-color: #0a0a0a;
@@ -5663,7 +5672,8 @@ a.nav-item:not(.button).is-tab.is-active {
     color: #0a0a0a;
   }
   .navbar.is-white .navbar-dropdown a.navbar-item.is-active {
-    color: white;
+    background-color: white;
+    color: #0a0a0a;
   }
 }
 
@@ -5672,20 +5682,30 @@ a.nav-item:not(.button).is-tab.is-active {
   color: white;
 }
 
+.navbar.is-black .navbar-brand > .navbar-item,
+.navbar.is-black .navbar-brand .navbar-link {
+  color: white;
+}
+
+.navbar.is-black .navbar-brand > a.navbar-item:hover, .navbar.is-black .navbar-brand > a.navbar-item.is-active,
+.navbar.is-black .navbar-brand .navbar-link:hover,
+.navbar.is-black .navbar-brand .navbar-link.is-active {
+  background-color: black;
+  color: white;
+}
+
+.navbar.is-black .navbar-brand .navbar-link::after {
+  border-color: white;
+}
+
 @media screen and (min-width: 1024px) {
-  .navbar.is-black .navbar-brand > .navbar-item,
-  .navbar.is-black .navbar-brand .navbar-link,
   .navbar.is-black .navbar-start > .navbar-item,
   .navbar.is-black .navbar-start .navbar-link,
   .navbar.is-black .navbar-end > .navbar-item,
   .navbar.is-black .navbar-end .navbar-link {
     color: white;
   }
-  .navbar.is-black .navbar-brand > a.navbar-item:hover, .navbar.is-black .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-black .navbar-start > a.navbar-item:hover, .navbar.is-black .navbar-start > a.navbar-item.is-active,
-  .navbar.is-black .navbar-brand .navbar-link:hover,
-  .navbar.is-black .navbar-brand .navbar-link.is-active,
-  .navbar.is-black .navbar-start > a.navbar-item:hover,
-  .navbar.is-black .navbar-start > a.navbar-item.is-active,
   .navbar.is-black .navbar-start .navbar-link:hover,
   .navbar.is-black .navbar-start .navbar-link.is-active,
   .navbar.is-black .navbar-end > a.navbar-item:hover,
@@ -5695,7 +5715,6 @@ a.nav-item:not(.button).is-tab.is-active {
     background-color: black;
     color: white;
   }
-  .navbar.is-black .navbar-brand .navbar-link::after,
   .navbar.is-black .navbar-start .navbar-link::after,
   .navbar.is-black .navbar-end .navbar-link::after {
     border-color: white;
@@ -5706,7 +5725,8 @@ a.nav-item:not(.button).is-tab.is-active {
     color: white;
   }
   .navbar.is-black .navbar-dropdown a.navbar-item.is-active {
-    color: #0a0a0a;
+    background-color: #0a0a0a;
+    color: white;
   }
 }
 
@@ -5715,20 +5735,30 @@ a.nav-item:not(.button).is-tab.is-active {
   color: #363636;
 }
 
+.navbar.is-light .navbar-brand > .navbar-item,
+.navbar.is-light .navbar-brand .navbar-link {
+  color: #363636;
+}
+
+.navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active,
+.navbar.is-light .navbar-brand .navbar-link:hover,
+.navbar.is-light .navbar-brand .navbar-link.is-active {
+  background-color: #e8e8e8;
+  color: #363636;
+}
+
+.navbar.is-light .navbar-brand .navbar-link::after {
+  border-color: #363636;
+}
+
 @media screen and (min-width: 1024px) {
-  .navbar.is-light .navbar-brand > .navbar-item,
-  .navbar.is-light .navbar-brand .navbar-link,
   .navbar.is-light .navbar-start > .navbar-item,
   .navbar.is-light .navbar-start .navbar-link,
   .navbar.is-light .navbar-end > .navbar-item,
   .navbar.is-light .navbar-end .navbar-link {
     color: #363636;
   }
-  .navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-light .navbar-start > a.navbar-item:hover, .navbar.is-light .navbar-start > a.navbar-item.is-active,
-  .navbar.is-light .navbar-brand .navbar-link:hover,
-  .navbar.is-light .navbar-brand .navbar-link.is-active,
-  .navbar.is-light .navbar-start > a.navbar-item:hover,
-  .navbar.is-light .navbar-start > a.navbar-item.is-active,
   .navbar.is-light .navbar-start .navbar-link:hover,
   .navbar.is-light .navbar-start .navbar-link.is-active,
   .navbar.is-light .navbar-end > a.navbar-item:hover,
@@ -5738,7 +5768,6 @@ a.nav-item:not(.button).is-tab.is-active {
     background-color: #e8e8e8;
     color: #363636;
   }
-  .navbar.is-light .navbar-brand .navbar-link::after,
   .navbar.is-light .navbar-start .navbar-link::after,
   .navbar.is-light .navbar-end .navbar-link::after {
     border-color: #363636;
@@ -5749,7 +5778,8 @@ a.nav-item:not(.button).is-tab.is-active {
     color: #363636;
   }
   .navbar.is-light .navbar-dropdown a.navbar-item.is-active {
-    color: whitesmoke;
+    background-color: whitesmoke;
+    color: #363636;
   }
 }
 
@@ -5758,20 +5788,30 @@ a.nav-item:not(.button).is-tab.is-active {
   color: whitesmoke;
 }
 
+.navbar.is-dark .navbar-brand > .navbar-item,
+.navbar.is-dark .navbar-brand .navbar-link {
+  color: whitesmoke;
+}
+
+.navbar.is-dark .navbar-brand > a.navbar-item:hover, .navbar.is-dark .navbar-brand > a.navbar-item.is-active,
+.navbar.is-dark .navbar-brand .navbar-link:hover,
+.navbar.is-dark .navbar-brand .navbar-link.is-active {
+  background-color: #292929;
+  color: whitesmoke;
+}
+
+.navbar.is-dark .navbar-brand .navbar-link::after {
+  border-color: whitesmoke;
+}
+
 @media screen and (min-width: 1024px) {
-  .navbar.is-dark .navbar-brand > .navbar-item,
-  .navbar.is-dark .navbar-brand .navbar-link,
   .navbar.is-dark .navbar-start > .navbar-item,
   .navbar.is-dark .navbar-start .navbar-link,
   .navbar.is-dark .navbar-end > .navbar-item,
   .navbar.is-dark .navbar-end .navbar-link {
     color: whitesmoke;
   }
-  .navbar.is-dark .navbar-brand > a.navbar-item:hover, .navbar.is-dark .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-dark .navbar-start > a.navbar-item:hover, .navbar.is-dark .navbar-start > a.navbar-item.is-active,
-  .navbar.is-dark .navbar-brand .navbar-link:hover,
-  .navbar.is-dark .navbar-brand .navbar-link.is-active,
-  .navbar.is-dark .navbar-start > a.navbar-item:hover,
-  .navbar.is-dark .navbar-start > a.navbar-item.is-active,
   .navbar.is-dark .navbar-start .navbar-link:hover,
   .navbar.is-dark .navbar-start .navbar-link.is-active,
   .navbar.is-dark .navbar-end > a.navbar-item:hover,
@@ -5781,7 +5821,6 @@ a.nav-item:not(.button).is-tab.is-active {
     background-color: #292929;
     color: whitesmoke;
   }
-  .navbar.is-dark .navbar-brand .navbar-link::after,
   .navbar.is-dark .navbar-start .navbar-link::after,
   .navbar.is-dark .navbar-end .navbar-link::after {
     border-color: whitesmoke;
@@ -5792,7 +5831,8 @@ a.nav-item:not(.button).is-tab.is-active {
     color: whitesmoke;
   }
   .navbar.is-dark .navbar-dropdown a.navbar-item.is-active {
-    color: #363636;
+    background-color: #363636;
+    color: whitesmoke;
   }
 }
 
@@ -5801,20 +5841,30 @@ a.nav-item:not(.button).is-tab.is-active {
   color: #fff;
 }
 
+.navbar.is-primary .navbar-brand > .navbar-item,
+.navbar.is-primary .navbar-brand .navbar-link {
+  color: #fff;
+}
+
+.navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active,
+.navbar.is-primary .navbar-brand .navbar-link:hover,
+.navbar.is-primary .navbar-brand .navbar-link.is-active {
+  background-color: #00b89c;
+  color: #fff;
+}
+
+.navbar.is-primary .navbar-brand .navbar-link::after {
+  border-color: #fff;
+}
+
 @media screen and (min-width: 1024px) {
-  .navbar.is-primary .navbar-brand > .navbar-item,
-  .navbar.is-primary .navbar-brand .navbar-link,
   .navbar.is-primary .navbar-start > .navbar-item,
   .navbar.is-primary .navbar-start .navbar-link,
   .navbar.is-primary .navbar-end > .navbar-item,
   .navbar.is-primary .navbar-end .navbar-link {
     color: #fff;
   }
-  .navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-primary .navbar-start > a.navbar-item:hover, .navbar.is-primary .navbar-start > a.navbar-item.is-active,
-  .navbar.is-primary .navbar-brand .navbar-link:hover,
-  .navbar.is-primary .navbar-brand .navbar-link.is-active,
-  .navbar.is-primary .navbar-start > a.navbar-item:hover,
-  .navbar.is-primary .navbar-start > a.navbar-item.is-active,
   .navbar.is-primary .navbar-start .navbar-link:hover,
   .navbar.is-primary .navbar-start .navbar-link.is-active,
   .navbar.is-primary .navbar-end > a.navbar-item:hover,
@@ -5824,7 +5874,6 @@ a.nav-item:not(.button).is-tab.is-active {
     background-color: #00b89c;
     color: #fff;
   }
-  .navbar.is-primary .navbar-brand .navbar-link::after,
   .navbar.is-primary .navbar-start .navbar-link::after,
   .navbar.is-primary .navbar-end .navbar-link::after {
     border-color: #fff;
@@ -5835,7 +5884,8 @@ a.nav-item:not(.button).is-tab.is-active {
     color: #fff;
   }
   .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
-    color: #00d1b2;
+    background-color: #00d1b2;
+    color: #fff;
   }
 }
 
@@ -5844,20 +5894,30 @@ a.nav-item:not(.button).is-tab.is-active {
   color: #fff;
 }
 
+.navbar.is-info .navbar-brand > .navbar-item,
+.navbar.is-info .navbar-brand .navbar-link {
+  color: #fff;
+}
+
+.navbar.is-info .navbar-brand > a.navbar-item:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active,
+.navbar.is-info .navbar-brand .navbar-link:hover,
+.navbar.is-info .navbar-brand .navbar-link.is-active {
+  background-color: #2366d1;
+  color: #fff;
+}
+
+.navbar.is-info .navbar-brand .navbar-link::after {
+  border-color: #fff;
+}
+
 @media screen and (min-width: 1024px) {
-  .navbar.is-info .navbar-brand > .navbar-item,
-  .navbar.is-info .navbar-brand .navbar-link,
   .navbar.is-info .navbar-start > .navbar-item,
   .navbar.is-info .navbar-start .navbar-link,
   .navbar.is-info .navbar-end > .navbar-item,
   .navbar.is-info .navbar-end .navbar-link {
     color: #fff;
   }
-  .navbar.is-info .navbar-brand > a.navbar-item:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-info .navbar-start > a.navbar-item:hover, .navbar.is-info .navbar-start > a.navbar-item.is-active,
-  .navbar.is-info .navbar-brand .navbar-link:hover,
-  .navbar.is-info .navbar-brand .navbar-link.is-active,
-  .navbar.is-info .navbar-start > a.navbar-item:hover,
-  .navbar.is-info .navbar-start > a.navbar-item.is-active,
   .navbar.is-info .navbar-start .navbar-link:hover,
   .navbar.is-info .navbar-start .navbar-link.is-active,
   .navbar.is-info .navbar-end > a.navbar-item:hover,
@@ -5867,7 +5927,6 @@ a.nav-item:not(.button).is-tab.is-active {
     background-color: #2366d1;
     color: #fff;
   }
-  .navbar.is-info .navbar-brand .navbar-link::after,
   .navbar.is-info .navbar-start .navbar-link::after,
   .navbar.is-info .navbar-end .navbar-link::after {
     border-color: #fff;
@@ -5878,7 +5937,8 @@ a.nav-item:not(.button).is-tab.is-active {
     color: #fff;
   }
   .navbar.is-info .navbar-dropdown a.navbar-item.is-active {
-    color: #3273dc;
+    background-color: #3273dc;
+    color: #fff;
   }
 }
 
@@ -5887,20 +5947,30 @@ a.nav-item:not(.button).is-tab.is-active {
   color: #fff;
 }
 
+.navbar.is-success .navbar-brand > .navbar-item,
+.navbar.is-success .navbar-brand .navbar-link {
+  color: #fff;
+}
+
+.navbar.is-success .navbar-brand > a.navbar-item:hover, .navbar.is-success .navbar-brand > a.navbar-item.is-active,
+.navbar.is-success .navbar-brand .navbar-link:hover,
+.navbar.is-success .navbar-brand .navbar-link.is-active {
+  background-color: #20bc56;
+  color: #fff;
+}
+
+.navbar.is-success .navbar-brand .navbar-link::after {
+  border-color: #fff;
+}
+
 @media screen and (min-width: 1024px) {
-  .navbar.is-success .navbar-brand > .navbar-item,
-  .navbar.is-success .navbar-brand .navbar-link,
   .navbar.is-success .navbar-start > .navbar-item,
   .navbar.is-success .navbar-start .navbar-link,
   .navbar.is-success .navbar-end > .navbar-item,
   .navbar.is-success .navbar-end .navbar-link {
     color: #fff;
   }
-  .navbar.is-success .navbar-brand > a.navbar-item:hover, .navbar.is-success .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-success .navbar-start > a.navbar-item:hover, .navbar.is-success .navbar-start > a.navbar-item.is-active,
-  .navbar.is-success .navbar-brand .navbar-link:hover,
-  .navbar.is-success .navbar-brand .navbar-link.is-active,
-  .navbar.is-success .navbar-start > a.navbar-item:hover,
-  .navbar.is-success .navbar-start > a.navbar-item.is-active,
   .navbar.is-success .navbar-start .navbar-link:hover,
   .navbar.is-success .navbar-start .navbar-link.is-active,
   .navbar.is-success .navbar-end > a.navbar-item:hover,
@@ -5910,7 +5980,6 @@ a.nav-item:not(.button).is-tab.is-active {
     background-color: #20bc56;
     color: #fff;
   }
-  .navbar.is-success .navbar-brand .navbar-link::after,
   .navbar.is-success .navbar-start .navbar-link::after,
   .navbar.is-success .navbar-end .navbar-link::after {
     border-color: #fff;
@@ -5921,7 +5990,8 @@ a.nav-item:not(.button).is-tab.is-active {
     color: #fff;
   }
   .navbar.is-success .navbar-dropdown a.navbar-item.is-active {
-    color: #23d160;
+    background-color: #23d160;
+    color: #fff;
   }
 }
 
@@ -5930,20 +6000,30 @@ a.nav-item:not(.button).is-tab.is-active {
   color: rgba(0, 0, 0, 0.7);
 }
 
+.navbar.is-warning .navbar-brand > .navbar-item,
+.navbar.is-warning .navbar-brand .navbar-link {
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.navbar.is-warning .navbar-brand > a.navbar-item:hover, .navbar.is-warning .navbar-brand > a.navbar-item.is-active,
+.navbar.is-warning .navbar-brand .navbar-link:hover,
+.navbar.is-warning .navbar-brand .navbar-link.is-active {
+  background-color: #ffd83d;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.navbar.is-warning .navbar-brand .navbar-link::after {
+  border-color: rgba(0, 0, 0, 0.7);
+}
+
 @media screen and (min-width: 1024px) {
-  .navbar.is-warning .navbar-brand > .navbar-item,
-  .navbar.is-warning .navbar-brand .navbar-link,
   .navbar.is-warning .navbar-start > .navbar-item,
   .navbar.is-warning .navbar-start .navbar-link,
   .navbar.is-warning .navbar-end > .navbar-item,
   .navbar.is-warning .navbar-end .navbar-link {
     color: rgba(0, 0, 0, 0.7);
   }
-  .navbar.is-warning .navbar-brand > a.navbar-item:hover, .navbar.is-warning .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-warning .navbar-start > a.navbar-item:hover, .navbar.is-warning .navbar-start > a.navbar-item.is-active,
-  .navbar.is-warning .navbar-brand .navbar-link:hover,
-  .navbar.is-warning .navbar-brand .navbar-link.is-active,
-  .navbar.is-warning .navbar-start > a.navbar-item:hover,
-  .navbar.is-warning .navbar-start > a.navbar-item.is-active,
   .navbar.is-warning .navbar-start .navbar-link:hover,
   .navbar.is-warning .navbar-start .navbar-link.is-active,
   .navbar.is-warning .navbar-end > a.navbar-item:hover,
@@ -5953,7 +6033,6 @@ a.nav-item:not(.button).is-tab.is-active {
     background-color: #ffd83d;
     color: rgba(0, 0, 0, 0.7);
   }
-  .navbar.is-warning .navbar-brand .navbar-link::after,
   .navbar.is-warning .navbar-start .navbar-link::after,
   .navbar.is-warning .navbar-end .navbar-link::after {
     border-color: rgba(0, 0, 0, 0.7);
@@ -5964,7 +6043,8 @@ a.nav-item:not(.button).is-tab.is-active {
     color: rgba(0, 0, 0, 0.7);
   }
   .navbar.is-warning .navbar-dropdown a.navbar-item.is-active {
-    color: #ffdd57;
+    background-color: #ffdd57;
+    color: rgba(0, 0, 0, 0.7);
   }
 }
 
@@ -5973,20 +6053,30 @@ a.nav-item:not(.button).is-tab.is-active {
   color: #fff;
 }
 
+.navbar.is-danger .navbar-brand > .navbar-item,
+.navbar.is-danger .navbar-brand .navbar-link {
+  color: #fff;
+}
+
+.navbar.is-danger .navbar-brand > a.navbar-item:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active,
+.navbar.is-danger .navbar-brand .navbar-link:hover,
+.navbar.is-danger .navbar-brand .navbar-link.is-active {
+  background-color: #ff1f4b;
+  color: #fff;
+}
+
+.navbar.is-danger .navbar-brand .navbar-link::after {
+  border-color: #fff;
+}
+
 @media screen and (min-width: 1024px) {
-  .navbar.is-danger .navbar-brand > .navbar-item,
-  .navbar.is-danger .navbar-brand .navbar-link,
   .navbar.is-danger .navbar-start > .navbar-item,
   .navbar.is-danger .navbar-start .navbar-link,
   .navbar.is-danger .navbar-end > .navbar-item,
   .navbar.is-danger .navbar-end .navbar-link {
     color: #fff;
   }
-  .navbar.is-danger .navbar-brand > a.navbar-item:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active,
+  .navbar.is-danger .navbar-start > a.navbar-item:hover, .navbar.is-danger .navbar-start > a.navbar-item.is-active,
-  .navbar.is-danger .navbar-brand .navbar-link:hover,
-  .navbar.is-danger .navbar-brand .navbar-link.is-active,
-  .navbar.is-danger .navbar-start > a.navbar-item:hover,
-  .navbar.is-danger .navbar-start > a.navbar-item.is-active,
   .navbar.is-danger .navbar-start .navbar-link:hover,
   .navbar.is-danger .navbar-start .navbar-link.is-active,
   .navbar.is-danger .navbar-end > a.navbar-item:hover,
@@ -5996,7 +6086,6 @@ a.nav-item:not(.button).is-tab.is-active {
     background-color: #ff1f4b;
     color: #fff;
   }
-  .navbar.is-danger .navbar-brand .navbar-link::after,
   .navbar.is-danger .navbar-start .navbar-link::after,
   .navbar.is-danger .navbar-end .navbar-link::after {
     border-color: #fff;
@@ -6007,7 +6096,8 @@ a.nav-item:not(.button).is-tab.is-active {
     color: #fff;
   }
   .navbar.is-danger .navbar-dropdown a.navbar-item.is-active {
-    color: #ff3860;
+    background-color: #ff3860;
+    color: #fff;
   }
 }
 

docs/documentation/components/navbar.html

@@ -1012,6 +1012,23 @@ document.addEventListener('DOMContentLoaded', function () {
       <span class="tag is-info">0.5.2</span>
     </div>
 
+    <div class="content">
+      <p>
+        You can change the background color of the <code>navbar</code> by using one of the <strong>9 color modifiers:</strong>
+      </p>
+      <ul>
+        <li><code>is-primary</code></li>
+        <li><code>is-info</code></li>
+        <li><code>is-success</code></li>
+        <li><code>is-warning</code></li>
+        <li><code>is-danger</code></li>
+        <li><code>is-black</code></li>
+        <li><code>is-dark</code></li>
+        <li><code>is-light</code></li>
+        <li><code>is-white</code></li>
+      </ul>
+    </div>
+
     {% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
 
     <div class="bd-example is-paddingless">
@@ -1027,13 +1044,29 @@ document.addEventListener('DOMContentLoaded', function () {
     </div>
 
     <div class="bd-example is-paddingless">
-      {% include examples/navbar-color.html color="warning" %}
+      {% include examples/navbar-color.html color="warning" light=true %}
     </div>
 
     <div class="bd-example is-paddingless">
       {% include examples/navbar-color.html color="danger" %}
     </div>
 
+    <div class="bd-example is-paddingless">
+      {% include examples/navbar-color.html color="black" %}
+    </div>
+
+    <div class="bd-example is-paddingless">
+      {% include examples/navbar-color.html color="dark" %}
+    </div>
+
+    <div class="bd-example is-paddingless">
+      {% include examples/navbar-color.html color="light" light=true %}
+    </div>
+
+    <div class="bd-example is-paddingless">
+      {% include examples/navbar-color.html color="white" light=true %}
+    </div>
+
     {% include variables.html %}
 
   </div>

sass/components/navbar.sass

@@ -43,8 +43,20 @@ $navbar-divider-background-color: $border !default
     &.is-#{$name}
       background-color: $color
       color: $color-invert
+      .navbar-brand
+        & > .navbar-item,
+        .navbar-link
+          color: $color-invert
+        & > a.navbar-item,
+        .navbar-link
+          &:hover,
+          &.is-active
+            background-color: darken($color, 5%)
+            color: $color-invert
+        .navbar-link
+          &::after
+            border-color: $color-invert
       +desktop
-        .navbar-brand,
         .navbar-start,
         .navbar-end
           & > .navbar-item,
@@ -66,7 +78,8 @@ $navbar-divider-background-color: $border !default
         .navbar-dropdown
           a.navbar-item
             &.is-active
-              color: $color
+              background-color: $color
+              color: $color-invert
   & > .container
     align-items: stretch
     display: flex