[FIX] navbar

main/styleguide/source/_patterns/organisms/header.mustache

 <!-- Navbar -->
-<nav class="bg-black xl:duration-200 xl:bg-transparent xl:absolute xl:z-50 xl:w-full hover:bg-black">
-  <!-- Flex container -->
-  <div class="relative main-menu grid items-center justify-around xl:p-6">
+<nav class="navbar-background bg-black xl:duration-200 xl:bg-transparent xl:absolute xl:z-50 xl:w-full hover:bg-black">
   <!-- Logo -->
-    <a href="" class="flag bg-white m-3 p-1 main-menu__logo">
+  <a href="" class="menu-flag flex justify-center flag bg-white my-2 p-1 main-menu__logo xl:my-3">
     <img src="../../images/logo-full-black.svg" alt="">
   </a>
+  <!-- Flex container -->
+  <div class="grid-container main-menu-grid">
+    <div class="main-menu grid-content-with-right-side grid justify-between items-center xl:py-6">
       <!-- Hamburger Icon -->
       <input class="hidden" type="checkbox" id="menuToggle"/>
-    <label class="p-3 hamb text-white xl:hidden" for="menuToggle">
+      <label class="p-3 hamb text-white col-start-2 xl:hidden" for="menuToggle">
         <i class="ico--menu text-3xl"></i>
       </label>
       <!-- Menu -->
-    <div class="main-menu__main main-menu-items space-x-6 xl:flex">
+      <div class="main-menu__main main-menu-items space-x-3 2xl:space-x-6 xl:flex">
         <a href="#" class="menu-link">Jak pracujeme</a>
         <a href="#" class="menu-link">Program</a>
         <a href="#" class="menu-link">O nás</a>
@@ -20,15 +21,15 @@
         <a href="#" class="menu-link">Kontakty</a>
       </div>
       <!--     Buttons & Social-->
-    <div class="main-menu__external main-menu-items items-center space-x-3 xl:flex space-x-3">
-      <div class="flex mb-2 xl:mb-0">
-        <a href="" class="mr-3">
+      <div class="main-menu__external main-menu-items items-center space-x-1 2xl:space-x-3 xl:flex">
+        <div class="flex space-x-3 mb-2 xl:mb-0 xl:mr-2">
+          <a href="" class="text-white hover:no-underline">
             <i class="ico--facebook"></i>
           </a>
-        <a href="" class="mr-3">
+          <a href="" class="text-white hover:no-underline">
             <i class="ico--twitter"></i>
           </a>
-        <a href="" class="mr-3">
+          <a href="" class="text-white hover:no-underline">
             <i class="ico--instagram"></i>
           </a>
         </div>
@@ -46,4 +47,5 @@
         </a>
       </div>
     </div>
+  </div>
 </nav>

main/styleguide/source/css/organisms/navbar.pcss

@@ -32,12 +32,27 @@
   grid-area: main;
 
   .menu-link {
-    @apply p-3 bg-black text-white font-condensed uppercase leading-loose cursor-pointer hover:no-underline xl:text-lg xl:bg-transparent;
+    @apply bg-black text-white font-condensed uppercase leading-loose cursor-pointer hover:no-underline xl:text-lg xl:bg-transparent;
   }
 }
 
+.navbar-background {
+  background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
+}
+.main-menu-grid {
+  max-width: none;
+  grid-template-areas:
+  "content"
+}
+
+.menu-flag {
+  position: absolute;
+  left: 0;
+  width: 110px;
+}
+
 .main-menu__external {
-  @apply bg-black text-white p-3;
+  @apply bg-black text-white;
   grid-area: external;
 }
 
@@ -46,11 +61,15 @@
     display: flex !important;
   }
   .main-menu {
-    grid-template-areas: "logo main social external";
+    grid-template-areas: "main social external";
     flex-wrap: nowrap;
 
     .main-menu__external {
       @apply bg-transparent text-black p-0;
     }
   }
+
+  .menu-flag {
+    width: 260px;
+  }
 }