diff --git a/docs/_sass/highlight.sass b/docs/_sass/highlight.sass
index 85285a6f..f6827fec 100644
--- a/docs/_sass/highlight.sass
+++ b/docs/_sass/highlight.sass
@@ -126,6 +126,10 @@
   margin-left: 0
   margin-right: 0
   text-align: left
+  &:not(:first-child)
+    margin-top: 1em
+  &:not(:last-child)
+    margin-bottom: 1em
 
 .content li .highlight
   margin-top: 0.5em
diff --git a/docs/_sass/override.sass b/docs/_sass/override.sass
index 0dee6cc0..19e048b4 100644
--- a/docs/_sass/override.sass
+++ b/docs/_sass/override.sass
@@ -1,4 +1,7 @@
 .content
+  .bd-spaced
+    li + li
+      margin-top: 1em
   .highlighter-rouge
     &:not(:last-child)
       margin-bottom: 1.5rem
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index cb3b4141..6d8b0443 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -6556,10 +6556,10 @@ html.has-navbar-fixed-bottom {
 }
 
 a.navbar-item:hover, a.navbar-item.is-active,
-.navbar-link:hover,
-.navbar-link.is-active {
+a.navbar-link:hover,
+a.navbar-link.is-active {
   background-color: whitesmoke;
-  color: #0a0a0a;
+  color: #3273dc;
 }
 
 .navbar-item {
@@ -6675,8 +6675,8 @@ a.navbar-item:hover, a.navbar-item.is-active,
     min-height: 3.25rem;
   }
   .navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active,
-  .navbar.is-transparent .navbar-link:hover,
-  .navbar.is-transparent .navbar-link.is-active {
+  .navbar.is-transparent a.navbar-link:hover,
+  .navbar.is-transparent a.navbar-link.is-active {
     background-color: transparent !important;
   }
   .navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link {
@@ -6826,11 +6826,11 @@ a.navbar-item:hover, a.navbar-item.is-active,
     padding-bottom: 3.25rem;
   }
   a.navbar-item.is-active,
-  .navbar-link.is-active {
+  a.navbar-link.is-active {
     color: #0a0a0a;
   }
   a.navbar-item.is-active:not(:hover),
-  .navbar-link.is-active:not(:hover) {
+  a.navbar-link.is-active:not(:hover) {
     background-color: transparent;
   }
   .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link {
@@ -9800,10 +9800,22 @@ label.panel-block:hover {
   text-align: left;
 }
 
+.content .highlight:not(:first-child) {
+  margin-top: 1em;
+}
+
+.content .highlight:not(:last-child) {
+  margin-bottom: 1em;
+}
+
 .content li .highlight {
   margin-top: 0.5em;
 }
 
+.content .bd-spaced li + li {
+  margin-top: 1em;
+}
+
 .content .highlighter-rouge:not(:last-child) {
   margin-bottom: 1.5rem;
 }
diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index 7b9faeaa..4a96352d 100644
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -746,7 +746,7 @@ document.addEventListener('DOMContentLoaded', function () {
       <p>
         A <code>navbar-item</code> is a repeatable element that can be:
       </p>
-      <ul>
+      <ul class="bd-spaced">
         <li>
           a navigation <strong>link</strong>
           {% highlight html %}{{ navbar_item_link_example }}{% endhighlight %}
@@ -813,7 +813,7 @@ document.addEventListener('DOMContentLoaded', function () {
       <p>
         You can now <strong>fix</strong> the navbar to either the <strong>top</strong> or <strong>bottom</strong> of the page. This is a 2-step process:
       </p>
-      <ul>
+      <ul class="bd-spaced">
         <li>
           Add either <code>is-fixed-top</code> or <code>is-fixed-bottom</code> to the <code>navbar</code> component
           {% highlight html %}<nav class="navbar is-fixed-top">{% endhighlight %}
@@ -832,13 +832,13 @@ document.addEventListener('DOMContentLoaded', function () {
         <span class="icon">
           <i class="fa fa-square-o"></i>
         </span>
-        <span>Fix top navbar</span>
+        <span>Fix <strong>top</strong> navbar</span>
       </a>
       <a id="navbarFixBottom" class="button is-link">
         <span class="icon">
           <i class="fa fa-square-o"></i>
         </span>
-        <span>Show bottom navbar</span>
+        <span>Show <strong>bottom</strong> navbar</span>
       </a>
     </div>
 
diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 790aeba7..410b9b01 100644
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -3,7 +3,7 @@ $navbar-height: 3.25rem !default
 $navbar-fixed-z: 30 !default
 
 $navbar-item-color: $grey-dark !default
-$navbar-item-hover-color: $black !default
+$navbar-item-hover-color: $link !default
 $navbar-item-hover-background-color: $background !default
 $navbar-item-active-color: $black !default
 $navbar-item-active-background-color: transparent !default
@@ -144,7 +144,7 @@ html.has-navbar-fixed-bottom
   position: relative
 
 a.navbar-item,
-.navbar-link
+a.navbar-link
   &:hover,
   &.is-active
     background-color: $navbar-item-hover-background-color
@@ -238,7 +238,7 @@ a.navbar-item,
     min-height: $navbar-height
     &.is-transparent
       a.navbar-item,
-      .navbar-link
+      a.navbar-link
         &:hover,
         &.is-active
           background-color: transparent !important
@@ -360,7 +360,7 @@ a.navbar-item,
     padding-bottom: $navbar-height
   // Hover/Active states
   a.navbar-item,
-  .navbar-link
+  a.navbar-link
     &.is-active
       color: $navbar-item-active-color
     &.is-active:not(:hover)