From 4387358451d9ded206a64164f25b628258ddba5c Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 24 Sep 2020 10:56:52 -0300
Subject: [PATCH] Logo absolute centering

---
 components/Navbar/Navbar.module.css | 7 ++++++-
 components/Navbar/Navbar.tsx        | 4 +++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css
index 9bded590c..1cfa0ba05 100644
--- a/components/Navbar/Navbar.module.css
+++ b/components/Navbar/Navbar.module.css
@@ -3,5 +3,10 @@
 }
 
 .container {
-  @apply flex justify-between items-center flex-row px-4 border-black border-l border-r h-20;
+  @apply flex justify-between items-center flex-row px-4 border-black border-l border-r h-20 relative;
+}
+
+.logoContainer {
+  @apply absolute transform -translate-x-1/2;
+  left: 50%;
 }
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index faa2b884a..4f601f187 100644
--- a/components/Navbar/Navbar.tsx
+++ b/components/Navbar/Navbar.tsx
@@ -19,7 +19,9 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
             All Clothes Accesories
           </nav>
         </div>
-        <Logo />
+        <span className={s.logoContainer}>
+          <Logo />
+        </span>
         <nav>
           <Avatar />
         </nav>