From 8ab3a9f972c2d4a908f138dd6ae82678677a9c13 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sun, 2 Apr 2017 16:28:18 +0100
Subject: [PATCH] Fix #506

---
 CHANGELOG.md            |  1 +
 docs/css/bulma-docs.css | 63 +++++++++++++++++++++++++++++++++++++++++
 sass/layout/hero.sass   |  3 ++
 3 files changed, 67 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 56692be9..49096999 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@
 * Fix #565 `dl` styles
 * Fix #389 `pre` `margin-bottom`
 * Fix #484 icon alignment
+* Fix #506 bold nav menu
 
 ## 0.4.0
 
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index c2442683..0dd1da89 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -6204,6 +6204,13 @@ label.panel-block:hover {
   background-image: linear-gradient(141deg, #e6e6e6 0%, white 71%, white 100%);
 }
 
+@media screen and (max-width: 768px) {
+  .hero.is-white.is-bold .nav-menu {
+    background-image: -webkit-linear-gradient(309deg, #e6e6e6 0%, white 71%, white 100%);
+    background-image: linear-gradient(141deg, #e6e6e6 0%, white 71%, white 100%);
+  }
+}
+
 @media screen and (max-width: 768px) {
   .hero.is-white .nav-toggle span {
     background-color: #0a0a0a;
@@ -6295,6 +6302,13 @@ label.panel-block:hover {
   background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%);
 }
 
+@media screen and (max-width: 768px) {
+  .hero.is-black.is-bold .nav-menu {
+    background-image: -webkit-linear-gradient(309deg, black 0%, #0a0a0a 71%, #181616 100%);
+    background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%);
+  }
+}
+
 @media screen and (max-width: 768px) {
   .hero.is-black .nav-toggle span {
     background-color: white;
@@ -6386,6 +6400,13 @@ label.panel-block:hover {
   background-image: linear-gradient(141deg, #dfd8d8 0%, whitesmoke 71%, white 100%);
 }
 
+@media screen and (max-width: 768px) {
+  .hero.is-light.is-bold .nav-menu {
+    background-image: -webkit-linear-gradient(309deg, #dfd8d8 0%, whitesmoke 71%, white 100%);
+    background-image: linear-gradient(141deg, #dfd8d8 0%, whitesmoke 71%, white 100%);
+  }
+}
+
 @media screen and (max-width: 768px) {
   .hero.is-light .nav-toggle span {
     background-color: #363636;
@@ -6477,6 +6498,13 @@ label.panel-block:hover {
   background-image: linear-gradient(141deg, #1f1919 0%, #363636 71%, #463f3f 100%);
 }
 
+@media screen and (max-width: 768px) {
+  .hero.is-dark.is-bold .nav-menu {
+    background-image: -webkit-linear-gradient(309deg, #1f1919 0%, #363636 71%, #463f3f 100%);
+    background-image: linear-gradient(141deg, #1f1919 0%, #363636 71%, #463f3f 100%);
+  }
+}
+
 @media screen and (max-width: 768px) {
   .hero.is-dark .nav-toggle span {
     background-color: whitesmoke;
@@ -6568,6 +6596,13 @@ label.panel-block:hover {
   background-image: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
 }
 
+@media screen and (max-width: 768px) {
+  .hero.is-primary.is-bold .nav-menu {
+    background-image: -webkit-linear-gradient(309deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
+    background-image: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
+  }
+}
+
 @media screen and (max-width: 768px) {
   .hero.is-primary .nav-toggle span {
     background-color: #fff;
@@ -6659,6 +6694,13 @@ label.panel-block:hover {
   background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
 }
 
+@media screen and (max-width: 768px) {
+  .hero.is-info.is-bold .nav-menu {
+    background-image: -webkit-linear-gradient(309deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
+    background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
+  }
+}
+
 @media screen and (max-width: 768px) {
   .hero.is-info .nav-toggle span {
     background-color: #fff;
@@ -6750,6 +6792,13 @@ label.panel-block:hover {
   background-image: linear-gradient(141deg, #12af2f 0%, #23d160 71%, #2ce28a 100%);
 }
 
+@media screen and (max-width: 768px) {
+  .hero.is-success.is-bold .nav-menu {
+    background-image: -webkit-linear-gradient(309deg, #12af2f 0%, #23d160 71%, #2ce28a 100%);
+    background-image: linear-gradient(141deg, #12af2f 0%, #23d160 71%, #2ce28a 100%);
+  }
+}
+
 @media screen and (max-width: 768px) {
   .hero.is-success .nav-toggle span {
     background-color: #fff;
@@ -6841,6 +6890,13 @@ label.panel-block:hover {
   background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%);
 }
 
+@media screen and (max-width: 768px) {
+  .hero.is-warning.is-bold .nav-menu {
+    background-image: -webkit-linear-gradient(309deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%);
+    background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%);
+  }
+}
+
 @media screen and (max-width: 768px) {
   .hero.is-warning .nav-toggle span {
     background-color: rgba(0, 0, 0, 0.7);
@@ -6932,6 +6988,13 @@ label.panel-block:hover {
   background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%);
 }
 
+@media screen and (max-width: 768px) {
+  .hero.is-danger.is-bold .nav-menu {
+    background-image: -webkit-linear-gradient(309deg, #ff0561 0%, #ff3860 71%, #ff5257 100%);
+    background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%);
+  }
+}
+
 @media screen and (max-width: 768px) {
   .hero.is-danger .nav-toggle span {
     background-color: #fff;
diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass
index 7de0f7b4..2f95c892 100644
--- a/sass/layout/hero.sass
+++ b/sass/layout/hero.sass
@@ -115,6 +115,9 @@
         $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
         $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
         background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+        +mobile
+          .nav-menu
+            background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
       // Responsiveness
       +mobile
         .nav-toggle