Fix #512

CHANGELOG.md

@@ -15,6 +15,7 @@
 * Fix #484 icon alignment
 * Fix #506 bold nav menu
 * Fix #581 nav container
+* Fix #512 nav grouped buttons
 
 ## 0.4.0
 

docs/_includes/header.html

@@ -39,46 +39,31 @@
       Blog
     </a>
 
-    {% if page.route != 'nothing' %}
-      <span class="nav-item">
-        <a id="twitter"
-          class="button"
-          data-social-network="Twitter"
-          data-social-action="tweet"
-          data-social-target="{{ site.url }}"
-          target="_blank"
-          href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&url={{ site.url }}&via=jgthms">
-          <span class="icon">
-            <i class="fa fa-twitter"></i>
-          </span>
-          <span>Tweet</span>
-        </a>
-        <a class="button is-primary" href="{{ site.download }}">
-          <span class="icon">
-            <i class="fa fa-download"></i>
-          </span>
-          <span>Download</span>
-        </a>
-      </span>
-    {% else %}
-      <span class="nav-item">
-        <a class="button is-primary is-inverted is-outlined"
-        data-social-network="Twitter"
-        data-social-action="tweet"
-        data-social-target="http://bulma.io/"
-        href="https://twitter.com/intent/tweet?text={{ 'Bulma: a modern CSS framework based on Flebox' | urlencode }}&url=http://bulma.io/&via=jgthms">
-          <span class="icon">
-            <i class="fa fa-twitter"></i>
-          </span>
-          <span>Tweet</span>
-        </a>
-        <a class="button is-primary is-inverted" href="{{ site.download }}">
-          <span class="icon">
-            <i class="fa fa-download"></i>
-          </span>
-          <span>Download</span>
-        </a>
-      </span>
-    {% endif %}
+    <div class="nav-item">
+      <div class="field is-grouped">
+        <p class="control">
+          <a id="twitter"
+            class="button"
+            data-social-network="Twitter"
+            data-social-action="tweet"
+            data-social-target="{{ site.url }}"
+            target="_blank"
+            href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&url={{ site.url }}&via=jgthms">
+            <span class="icon">
+              <i class="fa fa-twitter"></i>
+            </span>
+            <span>Tweet</span>
+          </a>
+        </p>
+        <p class="control">
+          <a class="button is-primary" href="{{ site.download }}">
+            <span class="icon">
+              <i class="fa fa-download"></i>
+            </span>
+            <span>Download</span>
+          </a>
+        </p>
+      </div>
+    </div>
   </div>
 </nav>

docs/css/bulma-docs.css

@@ -4174,10 +4174,6 @@ input[type="submit"].button {
   max-height: 1.75rem;
 }
 
-.nav-item .button + .button {
-  margin-left: 0.75rem;
-}
-
 .nav-item .tag:first-child:not(:last-child) {
   margin-right: 0.5rem;
 }

sass/components/nav.sass

@@ -22,8 +22,6 @@ $nav-height: 3.25rem !default
     flex-shrink: 0
   img
     max-height: 1.75rem
-  .button + .button
-    margin-left: 0.75rem
   .tag
     &:first-child:not(:last-child)
       margin-right: 0.5rem