add a primary menu item that shows along side mobile menu button

assets/scss/_navigation.scss

@@ -96,6 +96,7 @@
       font-size: 2.4rem;
       font-weight: 400;
       line-height: 6rem;
+      padding: 0.5em 0 0.5em 0.5em;
       color: $fg-color;
       cursor: pointer;
       &:hover,
@@ -107,4 +108,12 @@
       }
     }
   }
+  .primary-menu-item {
+    display: none;
+
+    @media only screen and (max-width: 768px) {
+      display: block;
+      margin-left: auto;
+    }
+  }
 }

layouts/partials/header.html

@@ -4,6 +4,11 @@
       {{ .Site.Title }}
     </a>
     {{ if or .Site.Menus.main .Site.IsMultiLingual }}
+    <span class="primary-menu-item">
+      {{ with index $.Site.Menus.main 0 }}
+          <a class="navigation-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
+      {{ end }}
+    </span>
     <input type="checkbox" id="menu-toggle" />
     <label class="menu-button float-right" for="menu-toggle">{{ partial "svg/hamburger.svg" }}</label>
     <ul class="navigation-list">