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 (
  • 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 {