From a5bef8a990d05df8dc3c4130469b3f06cc5b13bc Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Mon, 10 Jan 2022 14:07:47 -0500
Subject: [PATCH] Spiffier: Center logo in nav bar (#3605)

---
 changes/issue-3532-center-logo                |  1 +
 .../side_panels/SiteTopNav/SiteTopNav.jsx     |  2 +-
 .../side_panels/SiteTopNav/_styles.scss       | 24 ++++++++-----------
 3 files changed, 12 insertions(+), 15 deletions(-)
 create mode 100644 changes/issue-3532-center-logo

diff --git a/changes/issue-3532-center-logo b/changes/issue-3532-center-logo
new file mode 100644
index 0000000000..da5685ea06
--- /dev/null
+++ b/changes/issue-3532-center-logo
@@ -0,0 +1 @@
+* Fleet logo centered in nav bar
\ No newline at end of file
diff --git a/frontend/components/side_panels/SiteTopNav/SiteTopNav.jsx b/frontend/components/side_panels/SiteTopNav/SiteTopNav.jsx
index 97ca7d1fb2..bee9931d1b 100644
--- a/frontend/components/side_panels/SiteTopNav/SiteTopNav.jsx
+++ b/frontend/components/side_panels/SiteTopNav/SiteTopNav.jsx
@@ -52,7 +52,7 @@ class SiteTopNav extends Component {
       return (
         <li className={navItemClasses} key={`nav-item-${name}`}>
           <Link
-            className={`${navItemBaseClass}__link`}
+            className={`${navItemBaseClass}__logo`}
             to={navItem.location.pathname}
           >
             <OrgLogoIcon className="logo" src={orgLogoURL} />
diff --git a/frontend/components/side_panels/SiteTopNav/_styles.scss b/frontend/components/side_panels/SiteTopNav/_styles.scss
index d727c46ec7..2d19e000ce 100644
--- a/frontend/components/side_panels/SiteTopNav/_styles.scss
+++ b/frontend/components/side_panels/SiteTopNav/_styles.scss
@@ -15,12 +15,6 @@
     &:hover {
       background-color: transparent;
     }
-
-    .site-nav-item__link {
-      border-right: 3px solid $core-vibrant-blue;
-      background-color: $core-fleet-black;
-      height: 50px;
-    }
   }
 
   &__icon {
@@ -32,13 +26,6 @@
     vertical-align: sub;
   }
 
-  .logo {
-    @include size(48px);
-    border-radius: 20%;
-    padding: 0;
-    margin: -12px -15px 0;
-  }
-
   &__name {
     display: inline-flex;
     flex-direction: column;
@@ -61,7 +48,7 @@
     }
   }
 
-  a {
+  &__link {
     color: $core-white;
     text-align: center;
     display: flex;
@@ -70,6 +57,13 @@
     text-decoration: none;
   }
 
+  &__logo {
+    text-align: center;
+    display: table-cell;
+    vertical-align: middle;
+    width: 64px;
+  }
+
   &--active {
     border-bottom: 3px solid $core-vibrant-blue;
     background-color: $core-fleet-black;
@@ -87,6 +81,8 @@
 
 .logo {
   transform: scale(0.5);
+  position: relative;
+  top: 1px;
 }
 
 .site-nav-container {