From 7fa0f910ac50b6b0e11caedadd4d92b985c63f1c Mon Sep 17 00:00:00 2001
From: Amy Lam <alam@fastly.com>
Date: Thu, 3 May 2018 10:54:25 -0700
Subject: [PATCH] On mobile, hide title if logo exists (#629)

* On mobile, hide title if logo exists

* Run Prettier, use ternary, reorder

* Rename class for clarity

* Update main.css
---
 lib/core/nav/HeaderNav.js | 5 ++++-
 lib/static/css/main.css   | 9 ++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/lib/core/nav/HeaderNav.js b/lib/core/nav/HeaderNav.js
index 229bdfc576..7b9ed64c50 100644
--- a/lib/core/nav/HeaderNav.js
+++ b/lib/core/nav/HeaderNav.js
@@ -213,6 +213,9 @@ class HeaderNav extends React.Component {
   }
 
   render() {
+    const headerClass = siteConfig.headerIcon
+      ? 'headerTitleWithLogo'
+      : 'headerTitle';
     const versionsLink =
       this.props.baseUrl +
       (env.translation.enabled
@@ -235,7 +238,7 @@ class HeaderNav extends React.Component {
                 />
               )}
               {!this.props.config.disableHeaderTitle && (
-                <h2 className="headerTitle">{this.props.title}</h2>
+                <h2 className={headerClass}>{this.props.title}</h2>
               )}
             </a>
             {env.versioning.enabled && (
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index f9ba073eed..513ed5b743 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -522,14 +522,13 @@ header h2 {
   margin-left: 10px;
   font-size: 16px;
 }
-@media (max-width: 375px) {
-  .logo {
-    display: none;
-  }
-
+@media (max-width: 480px) {
   .headerTitle {
     font-size: 17px;
   }
+  .headerTitleWithLogo {
+    display: none !important;
+  }
 }
 
 .promoSection {