Fix nav

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index 3fedb378c37b7130ac944ea18d54abfde6995be2..75016141adf267cf934854d6e96180d8b3362404 100644 (file)
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -294,7 +294,7 @@ html.route-index #carbon
     border-top: none
     margin-top: -1.5rem
     pre
-      max-height: 600px
+      max-height: 50vh
     &:not(:last-child)
       margin-bottom: 1.5rem
 

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 5202ac169ad8b6d84d598aecf66e1cae13738275..7703258de165fe4f9f8df7b2d387072dd120d3c3 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -6662,7 +6662,7 @@ html.route-index #carbon {
 }
 
 .example + .highlight pre {
-  max-height: 600px;
+  max-height: 50vh;
 }
 
 .example + .highlight:not(:last-child) {

diff --git a/docs/documentation/components/nav.html b/docs/documentation/components/nav.html
index 7497fe0f8d73ccd298885a3d52afb461372ad2a0..03a9807d3bd8601702aefba7e5526f4c5f717d74 100644 (file)
--- a/docs/documentation/components/nav.html
+++ b/docs/documentation/components/nav.html
@@ -40,7 +40,7 @@ doc-subtab: nav
 <nav class="nav">
   <div class="nav-left">
     <a class="nav-item">
-      <img src="{{ site.url }}/images/bulma-type.png" alt="Bulma logo">
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
     </a>
   </div>
 
@@ -96,7 +96,7 @@ doc-subtab: nav
 </nav>
 {% endcapture %}
 
-<div class="example">
+<div class="example is-paddingless">
 {{nav_example}}
 </div>
 
@@ -114,45 +114,52 @@ doc-subtab: nav
         <li>the <code>nav-item</code> can become <strong>active</strong> by adding the <code>is-active</code> modifier</li>
         <li>the <code>nav-item</code> can become a <strong>tab</strong> by adding the <code>is-tab</code> modifier</li>
       </ul>
+      <p>
+        To optimise the space on desktop, but also allow the mobile view to be usable, you can <strong>duplicate</strong> nav items in both <code>nav-left</code> and <code>nav-right</code>, and show/hide them with <a href="{{site.url}}/documentation/modifiers/responsive-helpers/">responsive helpers</a>.
+      </p>
     </div>
   </div>
 
-<div class="example">
+{% capture nav_tabs_example %}
 <nav class="nav has-shadow">
   <div class="container">
     <div class="nav-left">
-      <a class="nav-item is-tab is-active">Card</a>
-      <a class="nav-item is-tab">Level</a>
-      <a class="nav-item is-tab">Media object</a>
-      <a class="nav-item is-tab">Menu</a>
-      <a class="nav-item is-tab">Message</a>
-      <a class="nav-item is-tab">Modal</a>
-      <a class="nav-item is-tab">Nav</a>
-      <a class="nav-item is-tab">Pagination</a>
-      <a class="nav-item is-tab">Panel</a>
-      <a class="nav-item is-tab">Tabs</a>
+      <a class="nav-item">
+        <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
+      </a>
+      <a class="nav-item is-tab is-hidden-mobile is-active">Home</a>
+      <a class="nav-item is-tab is-hidden-mobile">Features</a>
+      <a class="nav-item is-tab is-hidden-mobile">Pricing</a>
+      <a class="nav-item is-tab is-hidden-mobile">About</a>
+    </div>
+    <span class="nav-toggle">
+      <span></span>
+      <span></span>
+      <span></span>
+    </span>
+    <div class="nav-right nav-menu">
+      <a class="nav-item is-tab is-hidden-tablet is-active">Home</a>
+      <a class="nav-item is-tab is-hidden-tablet">Features</a>
+      <a class="nav-item is-tab is-hidden-tablet">Pricing</a>
+      <a class="nav-item is-tab is-hidden-tablet">About</a>
+      <a class="nav-item is-tab">
+        <figure class="image is-16x16" style="margin-right: 8px;">
+          <img src="{{site.url}}/images/jgthms.png">
+        </figure>
+        Profile
+      </a>
+      <a class="nav-item is-tab">Log out</a>
     </div>
   </div>
 </nav>
+{% endcapture %}
+
+<div class="example is-paddingless">
+{{nav_tabs_example}}
 </div>
 
 {% highlight html %}
-<nav class="nav has-shadow">
-  <div class="container">
-    <div class="nav-left">
-      <a class="nav-item is-tab is-active">Card</a>
-      <a class="nav-item is-tab">Level</a>
-      <a class="nav-item is-tab">Media object</a>
-      <a class="nav-item is-tab">Menu</a>
-      <a class="nav-item is-tab">Message</a>
-      <a class="nav-item is-tab">Modal</a>
-      <a class="nav-item is-tab">Nav</a>
-      <a class="nav-item is-tab">Pagination</a>
-      <a class="nav-item is-tab">Panel</a>
-      <a class="nav-item is-tab">Tabs</a>
-    </div>
-  </div>
-</nav>
+{{nav_tabs_example}}
 {% endhighlight %}
 
 </section>

diff --git a/docs/images/jgthms.png b/docs/images/jgthms.png
new file mode 100644 (file)
index 0000000..b89c009
Binary files /dev/null and b/docs/images/jgthms.png differ