Gap between header and hero on android

Currently on the process of building a website with the foundation 6 framework along with SCSS and it seems to display fine on an iPhone, but appears to show a wide white gap between the navigation top-bar and the hero section on Android phones (despite showing nothing wrong on chrome’s responsive tool).

HTML:

<header class="top-bar-container" data-sticky-container>
  <div class="sticky" data-sticky data-options="anchor: page; marginTop: 1; stickyOn: small;">

  <!-- TOP-NAV -->
  <div class="top-nav no-extra">
    <div class="row">
      <!-- left top-nav menu -->
      <div class="columns large-6 medium-8 small-5">
        <ul class="top-list no-extra">
          <li>
            <a href="#"></i> <span>Surrey, UK</span></a>
          </li>
          <li>
            <a href="#"><i class="fa fa-phone"></i> <span>0123456789</span></a>
          </li>
          <li>
            <a href="#"><i class="fa fa-envelope-o"></i> <span><?php bloginfo('admin_email'); ?></span></a>
          </li>
        </ul>
      </div>
      <!-- right top-nav menu -->
      <?php
        wp_nav_menu(array(
          'theme_location'  => 'top-bar',
          'container'       => 'div',
          'container_class' => 'columns large-6 medium-4 small-7',
          'menu_class'      => 'top-list-right no-extra'
        ));
      ?>
    </div><!-- .row -->
  </div><!-- .top-nav -->

  <!-- TOP-BAR -->
  <div class="top-bar no-extra" data-topbar role="navigation">
    <div class="row">
      <div class="columns large-6 medium-2 small-2">
        <a href="#">
          <div class="top-bar-left">
            <img src="<?php bloginfo('stylesheet_directory') ?>/img/image.png" alt="image">
            <div class="branding">
              <h1 class="brand-title no-extra">Brand<span> Extension</span></h1>
              <h3 class="header-motto">brand motto</h3>
            </div><!-- .branding -->
          </div><!-- .top-bar-left -->
        </a>
      </div><!-- .columns -->
      <div class="columns large-6 medium-10 small-10">
        <?php
          wp_nav_menu(array(
            'theme_location'  => 'primary',
            'container'       => 'div',
            'container_class' => 'top-bar-right',
            'menu_class'      => 'menu capitalised'
          ));
        ?>
      </div><!-- .columns -->
    </div><!-- .row -->
  </div><!-- .top-bar -->

</div><!-- .sticky -->
</header>

CSS (header):

    .sticky {
      margin-top: 0 !important;
      top: 0 !important;
    }

    .top-nav {
      width: 100%;
      background: #000;
      a { color: #fff; }
      a:hover { color: #ccc; }
      a span { display: inline-block; }
    }//.top-nav

    .top-list {
      list-style: none;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;
      li {
        float: left;
        padding: 10px 15px;
        color: #fff;
        font-size: 13px;
      }
      li:first-child { padding-left: 0; }
      li i { padding-right: 8px; }
    }//top-list

    .top-list-right {
      list-style: none;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;
      color: #fff;
      font-size: 13px;
      float: right;
      li {
        padding: 10px 15px;
        color: #fff;
        font-size: 13px;
        display: inline-block;
        vertical-align: middle;
      }
    }//top-list-right

    .top-bar {
      width: 100%;
      color: #fff;
      background: #1a1a1a;
      img, .branding {
        display: inline-block;
        vertical-align: middle;
      }
      img {
        width: 70px;
        padding: 10px 0 15px;
      }
      a { color: #fff; }
      h1 {
        margin-top: 10px;
        font-size: 34px;
        line-height: 20px;
        span {
          font-size: 23px;
          font-family: 'Open Sans', Arial, sans-serif;
        }
      }//h1
      h3 {
        margin: 0 0 5px 0;
        padding: 0;
        font-size: 1.4em;
        border-bottom: 3px solid #f04d2c;
      }
      span { font-size: 26px; }
      .top-bar-right {
        margin-top: 45px;
        .menu {
          padding: 0;
          margin: 0;
          background: #1a1a1a;
          .current_page_item a {
            color: #f04d2c;
            border-color: #f04d2c;
          }
          a {
            margin: 10px 20px 0;
            padding: 0 0 4px 0;
            background: #1a1a1a;
            color: #fff;
            border-bottom: 3px solid transparent;
          }
          a:hover { border-color: #f04d2c; }
        }//.menu
      }//.top-bar-right
    }//.top-bar

CSS (hero):

#videoModal {
  width: 70%;
  margin-top: 50px;
  background: #000;
  border: none;
  iframe, object, embed { max-width: 100%; }
  .close-button:hover { background: #f04d2c; }
}//videoModal

.showcase {
  padding-top: 220px;
  background: url('') no-repeat fixed;
  background-size: 1300px 700px;
  background-position: center 50px;
  height: 580px;
  color: #fff;
  text-align: center;
  a.play-area {
    color: #fff;
    cursor: pointer;
    .fa-play {
      margin-bottom: 10px;
      padding: 15px 18px 15px 28px;
      border-radius: 50%;
      background: rgba(40,40,40,.4);
      font-size: 50px;
      color: #fff;
      border: 3px solid #fff;
    }
  }//a.play-area
  a.play-area:hover {
    color: #55a9d9;
    font-weight: bold;
    .fa-play {
      color: #55a9d9;
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
      border-color: #55a9d9;
    }
  }//a.play-area:hover
  h1.company { display: none; }
  h2 {
    margin-top: 50px;
    font-size: 52px;
    line-height: 50px;
  }
  p.lead {
    margin-top: 10px;
    font-size: 1.4rem;
    line-height: 30px;
    display: block;
  }
}//showcase

Would anyone have any idea as per how to correct that please?
Thank you all in advance!

Read more here: Gap between header and hero on android

Leave a Reply

Your email address will not be published. Required fields are marked *