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

@@ -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 && (

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 {