src/lib/nav.html

@@ -17,16 +17,6 @@
       <a href="#" class="nav-bar--menu-link">{{ gettext('Contact') }}</a>
     </div>
     <div class="nav-bar--separator"></div>
-    <div class="nav-bar--languages">
-      {{ language_button('fr', 'Version Française') }}
-      {{ language_button('en', 'English version') }}
-    </div>
-    <toggle-nav-bar-button class="nav-bar--toggle-button">
-      <s class="bar"></s>
-      <s class="bar"></s>
-      <s class="bar"></s>
-    </toggle-nav-bar-button>
-  </div>
     <div class="nav-bar--links">
       <a href="mailto:contact@frog-collective.com">
           <img src="/img/mail-fill.svg" alt-text="{{ gettext('Mail') }}"></img>
@@ -47,5 +37,16 @@
           <img src="/img/facebook-circle-fill.svg" alt-text="Facebook"></img>
       </a>
     </div>
+    <div class="nav-bar--separator"></div>
+    <div class="nav-bar--languages">
+      {{ language_button('fr', 'Version Française') }}
+      {{ language_button('en', 'English version') }}
+    </div>
+    <toggle-nav-bar-button class="nav-bar--toggle-button">
+      <s class="bar"></s>
+      <s class="bar"></s>
+      <s class="bar"></s>
+    </toggle-nav-bar-button>
+  </div>
 </nav-bar>
 

src/lib/nav.scss

@@ -33,7 +33,7 @@
         margin: 0;
 
         display: grid;
-        grid-template-columns: 1fr auto auto;
+        grid-template-columns: var(--desktop-logo-width) 1fr auto auto auto;
 
         @media ($mobile-breakpoint) {
             height: var(--mobile-height);
@@ -73,7 +73,7 @@
     }
 
     &--menu {
-        justify-self: end;
+        grid-area: 1 / 2 / 2 / 3;
         align-self: center;
 
         display: flex;
@@ -184,7 +184,6 @@
     }
 
     &--links {
-        grid-area: 1 / 3 / 2 / 4;
         height: var(--desktop-height);
         grid-template-columns: 1fr auto auto;