From 49a5911fca2a9d8c337aa7ec7c934138378ad729 Mon Sep 17 00:00:00 2001
From: Austin Tice <austin.tice4@gmail.com>
Date: Wed, 10 Jan 2018 12:52:49 -0600
Subject: [PATCH] fix: Updated fCC Function Logo on Small Screen (#16460)

* Fixed FCC Logo on Small Screen

Changed *.logo-glyph* height to 28px from 30 which makes a nice form-factor on all screen sizes. I also utilized flexbox on the parent anchor tag in *.navbar-brand* in order to assure the logo always stays horizontally and vertically center.

* Deleted unneeded class name

I deleted the *.nav-logo* class from the FCC Function logo img tag. It was serving no essential purpose, and was only needed for the main FCC logo.
---
 common/app/Nav/Nav.jsx  | 2 +-
 common/app/Nav/nav.less | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/common/app/Nav/Nav.jsx b/common/app/Nav/Nav.jsx
index 936eeccbcb..930c6feb05 100644
--- a/common/app/Nav/Nav.jsx
+++ b/common/app/Nav/Nav.jsx
@@ -199,7 +199,7 @@ export class FCCNav extends React.Component {
               />
               <img
                 alt='learn to code javascript at freeCodeCamp logo'
-                className='img-responsive nav-logo logo-glyph'
+                className='img-responsive logo-glyph'
                 src={ fCCglyph }
               />
             </a>
diff --git a/common/app/Nav/nav.less b/common/app/Nav/nav.less
index a1bdacae01..6393cc90c9 100644
--- a/common/app/Nav/nav.less
+++ b/common/app/Nav/nav.less
@@ -32,6 +32,9 @@
 .navbar-brand {
   padding-top: @navbar-logo-padding;
   padding-bottom: @navbar-logo-padding;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .nav-logo {
@@ -255,7 +258,7 @@ li.nav-avatar {
 }
 
 .logo-glyph {
-  height: 30px;
+  height: 28px;
   width: auto;
 }