Test header

Author: paoloredis

layouts/partials/header.html

@@ -15,13 +15,13 @@
             <span class="inline-block ml-2 mt-1 text-redis-red-500 group-hover:rotate-180 transition-all ease-in-out duration-200">{{ partial "icons/caret.html" }}</span>
           </div>
           {{ partial "header/products-dropdown.html" . }}
+          <div class="group h-full px-2 xl:px-[14px]">
+            <div class="flex flex-row h-full ml-2 items-center cursor-pointer w-[10ch]">
+             <span class="inline-block group-hover:font-bold">Learn</span>
+             <span class="inline-block ml-2 mt-1 text-redis-red-500 group-hover:rotate-180 transition-all ease-in-out duration-200">{{ partial "icons/caret.html" }}</span>
+           </div>
+           {{ partial "header/learn-dropdown.html" . }}
         </div>
-          <div class="group px-2 xl:px-[14px] hidden lg:flex ">
-           <div class="flex flex-row h-full ml-2 items-center cursor-pointer w-[10ch]">
-            <span class="inline-block group-hover:font-bold">Learn</span>
-            <span class="inline-block ml-2 mt-1 text-redis-red-500 group-hover:rotate-180 transition-all ease-in-out duration-200">{{ partial "icons/caret.html" }}</span>
-          </div>
-          {{ partial "header/learn-dropdown.html" . }}
           </div>
         <a class="hidden lg:flex group flex-row items-center mr-2 pr-2" href="https://redis.io/docs/latest/"><span class="group-hover:font-bold">Docs</span></a>
       <a class="hidden lg:flex group flex-row items-center ml-2 pl-4 xl:pl-[14px]" href="https://redis.io/pricing"><span class="group-hover:font-bold">Pricing</span></a>

layouts/partials/header/learn-dropdown.html

@@ -1,4 +1,4 @@
-<div class="flex flex-col lg:hidden lg:group-hover:flex lg:absolute lg:-ml-60 lg:border lg:border-redis-pencil-300 bg-white lg:p-8 lg:flex-row lg:rounded-b-md gap-4 text-[15px]">
+<div class="flex flex-col lg:hidden lg:group-hover:flex lg:absolute lg:left-90 lg:border lg:border-redis-pencil-300 bg-white lg:p-8 lg:flex-row lg:rounded-b-md gap-8 text-[15px]">
   <div class="lg:w-60">
     <div class="flex flex-col gap-4">
       <h3 class="uppercase font-mono mb-2">Learn</h3>

layouts/partials/header/products-dropdown.html

@@ -1,4 +1,4 @@
-<div class="flex flex-col lg:hidden lg:group-hover:flex lg:absolute lg:left-11 lg:border lg:border-redis-pencil-300 bg-white lg:p-8 lg:flex-row lg:rounded-b-md gap-8 text-[15px]">
+<div class="flex flex-col lg:hidden lg:group-hover:flex lg:absolute lg:left-40 lg:border lg:border-redis-pencil-300 bg-white lg:p-8 lg:flex-row lg:rounded-b-md gap-8 text-[15px]">
   <div class="lg:w-60">
     <div class="flex flex-col gap-4">
       <h3 class="uppercase font-mono mb-2">Products</h3>