title: How can I make this header look better on mobile devices?
body: <p><a href="https://blendbee.com" rel="nofollow noreferrer">https://blendbee.com</a></p>
  
  <p>This is a WordPress site. The top part of the header needs some styling improvements for smaller screen sizes:</p>
  
  <ol>
  <li>Center the logo</li>
  <li>Some padding or margin above the logo (so it doesn't touch the top bar)</li>
  <li>Less whitespace above and below the menu icon</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/hTJNF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hTJNF.png" alt="enter image description here"></a></p>
  
  <p>Here's the current HTML code:</p>
  
  <pre><code>&lt;div class="header-wrap"&gt;
  &lt;header id="header" class="site-header " role="banner"&gt;
  &lt;div class="row"&gt;
  &lt;div class="large-12 small-12 columns"&gt;
  &lt;div class="logo"&gt;
  &lt;a href="https://blendbee.com/" title="BlendBee – Your Tea. Your Way." rel="home"&gt;
  &lt;img data-interchange="[https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png, (default)], [https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png, (retina)]" alt="" class="hideie" data-uuid="60a3bc00-c94c-c4ba-258c-a9faa107e418" src="https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png"&gt;
  &lt;img src="https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png" alt="" class="ie"&gt;
  &lt;noscript&gt;&amp;lt;img src='https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png' alt='BlendBee &amp;amp;#8211; Your Tea. Your Way.'&amp;gt;&lt;/noscript&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="mobile-menu-button" class="show-for-small"&gt;
  &lt;a class="secondary button" id="mobileMenuButton" href="#mobile-menu"&gt;
  &lt;span class="mobile-menu-icon"&gt;&lt;/span&gt;
  &lt;span class="mobile-menu-icon"&gt;&lt;/span&gt;
  &lt;span class="mobile-menu-icon"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And related CSS:</p>
  
  <pre><code>@media screen and (max-width: 767px) {   
          .mix.half.mix_all {
              width: 50%;
              float: left;
          }
  
          .mix.mix_all {
              width: 100%;
          }
  
          .sidebar.large-3.small-12.columns {
              width: 100%;
              float: none;
          }
  
          #soc-icons-wrap.closed {
              margin-bottom: 20px;
              height: 50px;
  
          }
  
          .large-6.small-12.columns p{
              width: 100% !important;
          }
  
          #header.scroll-to-fixed {
              position: static;
          }  
  
      }   
  
      #mobile-menu-button .button {
          margin-bottom: 0;
          padding: 0.75em 0.5em;
          width: auto
      }
  
      .mobile-menu-icon {
          background: #fff;
          height: 0.25em;
          width: 2.5em;
          display: block;
      }
  
      .mobile-menu-icon + .mobile-menu-icon {
          margin: 0.25em 0 0
      }
  
      @media only screen and (min-width: 767px) {
          body.admin-bar #header.scroll-to-fixed {
              top: 32px;
          }
  
      }
  
      @media only screen and (max-width: 767px) {
          .logo {
              float: none;
              text-align: center;
          }
  
  
          #header.scroll-to-fixed {
              position: static !important;
              height: auto;
              width: auto;
              border-bottom: none;
              }
  
          #header.scroll-to-fixed .logo {
              width: 300px;
              padding-top: 20px;
              position: static;
              top: 0;
              margin: 0 auto;
               }
  
  
          #header.scroll-to-fixed .logo img {
              max-height: 140px;
              width: 100%;
              -webkit-transition: none;
              -moz-transition: none;
              transition: none;
              }
  
          #mobile-menu .tiled-menu {
              float: none;
              margin: 0;
              padding: 0;
          }
  
          #mobile-menu .main-menu-item {
              float: none;
              width: 100% !important;
          }
  
          #mobile-menu .menu-tile {
              height: 60px !important;
              background-image: none !important;
          }
  
          #mobile-menu .item-title,
          #mobile-menu .tiled-menu &gt; .menu-item-language &gt; a {
              top: 5px;
              font-size: 20px;
              left: 25px;
          }
  
          #mobile-menu .tile-icon,
          #mobile-menu .tiled-menu &gt; .menu-item-language:before {
              right: 10%;
              width: auto;
          }
  
          #mobile-menu .tiled-menu &gt; .menu-item-language {
              height: 60px !important;
          }
  
          #mobile-menu .style-metro .sub-menu {
              padding-top: 3px;
          }
      }    
  
      @media only screen and (min-width: 640px) and (max-width: 1024px) {
          .tiled-menu .sub-menu {
              position: absolute;
          }
  
          .tiled-menu {
              text-align: center;
          }
  
          .main-menu-item {
              text-align: left;
          }
  
  
          .tiled-menu .metro-menu-item .sub-menu {
              position: absolute;
          }
  
      }
  
      wrapper i {
          margin: 84px 0 0 110px;
  
      }
  
      .entry-header .entry-meta .entry-tags {
          margin-left: 0;
      }
  
      .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns {
          position: relative;
          top: 12px;
      }
  
      .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns .answer {
          width: 33%;
          margin-top: 20px;
      }
  
      .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns .answer input {
          padding: 18px 5px;
      }
  
      .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns {
          width: 13%;
          margin-top: 20px;
      }
  
      .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
          width: 33%;
          margin-top: 20px;
      }
  
      .site-header {
          border-bottom: none;
      }
  
      ol ul, ul ol, ul ul, ol ol {
          -webkit-margin-before: 0px;
          -webkit-margin-after: 10px;
      }
  
      .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns p {
          float: left;
          width: 70%;
          text-align: left;
          margin-top: 0;
      }
  
  
      @media only screen and (min-width: 320px) and (max-width: 767px) {
          .tiled-menu {
              left: -3px !important;
          }
  
          .tiled-menu&gt;li&gt;ul {
              padding-top: 0;
          }
  
      }
  
  
      @media screen and (max-width: 320px) {    
          .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
              text-align: center;
          }
  
          .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
              margin-left: 28%;
              margin-top: 0;
              width: 52%;
          }
  
          .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
              margin-top:0 ;
          }
  
          .large-3.small-12.columns input{
              width: 145px;
          } 
  
      }
  
      @media screen and (min-width: 321px) and (max-width: 480px) {       
          .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
              text-align: center;
          }
  
          .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
              text-align: center;
          }
  
          .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
              margin-left: 36%;
              margin-top: 0;
              width: 35%;
          }
  
          .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
              margin-top:0 ;
          }
  
          .large-3.small-12.columns input{
              width: 148px;
          }
      }
  
         @media screen and (min-width: 480px) and (max-width: 800px) {
  
          .site-header .logo {
              margin: 0 auto 20px;
          }
  
          .site-header.scroll-to-fixed .logo  {
              margin: 0;
          }
  
      }
  
      @media screen and (min-width: 481px) and (max-width: 568px) {
          .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
              text-align: center;
          }
  
          .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
              margin-left: 38%;
              margin-top: 0;
              width: 30%;
          }
  
          .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
              margin-top:0 ;
          }
  
          .large-3.small-12.columns input{
              width: 149px;
          }
  
      }
  
      @media screen and (min-width: 569px) and (max-width: 600px) {
  
          .category-submenu .sub-nav .sub-nav dd {
              margin-left: 0.8rem !important;
              margin-bottom: 0;
          }
  
          .mix .entry-thumbnail img {
              width: 100% !important;
          }
  
          .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
              text-align: center;
          }
  
          .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
              margin-left: 38%;
              margin-top: 0;
              width: 28%;
          }
  
          .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
              margin-top:0 ;
          }
  
          .large-3.small-12.columns input{
              width: 148px;
          }
  
          .pricetable-column {width: 50% !important;}
      }
  
  
          @media screen and (min-width: 768px) and (max-width: 800px) {
  
  
              .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns p{
                  float: left;
                  width: 56%;
                  text-align: left;
                  margin-top: 0;
  
              }
  
  
              .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns {
                  width: 13%;
                  margin-top: 20px;
              }
  
              .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
                  width: 26%;
                  margin-top: 20px;
              }
  
          }
  
  
          @media screen and (min-width: 768px) and (max-width: 1000px) {
              .logo {
                  float: none;
                  margin: 0 auto;
              }
  
              #header.scroll-to-fixed .logo {
                  display: none;
              }
  
              .main-menu-item {
                  display: inline-block;
                  margin-left: 0;
                  float: none;
                  text-align: left;}
  
              .tiled-menu {
                  float: none;
                  text-align: center;
              }
  
                  }
  
      @media screen and (min-width: 640px) and (max-width: 767px) {
          .tiled-menu&gt;li&gt;ul {
              padding-top: 25px;
          }
      }  
  </code></pre>
  
  <p>If anyone can help, I'd be much appreciative - thanks :)</p>