レスポンシブ後の画面に隙間が出来てしまいます。

Question

PC版

スマホ版

画像はスマホサイズにした時の画面です。
ヘッダーの下にメインコンテンツをおきたいのですが、大きめの隙間が出来てしまいます。
検証モードで隙間を見ると、topbarbgと表示されたので、PC版のロゴの背景のボックス要素？が消えていあにんだと思います。
自分ではdisplay:none;で消したらスマホ版メニューが消えてしまいました。
どうすればヘッダーの下にディスプレイをおくことが出来ますでしょうか？
ブートストラップのグリッドで作成しています。よろしくお願いします。

<!-- レスポンシブ後のモバイルヘッダー -->
<div class="wsmobileheader clearfix">
  <a id="wsnavtoggle" class="wsanimated-arrow"><span></span></a>
  <span class="smllogo"><img src="images/logo.png" width="180" alt="" /></span>
  <div class="wssearch clearfix">
    <i class="wssearchicon fas fa-search"></i>
    <i class="wscloseicon fas fa-times"></i>
    <div class="wssearchform clearfix">
      <form>
        <input type="text" placeholder="検索">
      </form>
    </div>
  </div>
</div>
<!-- PCヘッダー -->
<div class="topbarbg  clearfix">
  <div class="headerwp clearfix">
    <div class="desktoplogo clearfix"><a href="index.html"><img src="images/logo.png" alt=""></a></div>
  </div>
  <!-- ナビゲーション -->
  <nav class="wsmenu clearfix">
    <ul class="wsmenu-list">
      <!-- ホームリンク -->
      <li aria-haspopup="true"><a href="#" class="wshomelink active"><i class="fas fa-home"></i><span class="hometext">&nbsp;&nbsp;ホーム</span></a></li>
    </ul>
  </nav>
</div>
<div>
  あ
</div>

/* global jQuery */
/* global document */

jQuery(function () {
  'use strict';

  document.addEventListener("touchstart", function () {}, false);
  jQuery(function () {

    jQuery('body').wrapInner('<div class="wsmenucontainer" />');
    jQuery('<div class="overlapblackbg"></div>').prependTo('.wsmenu');

    jQuery('#wsnavtoggle').click(function () {
      jQuery('body').toggleClass('wsactive');
    });

    jQuery('.overlapblackbg').click(function () {
      jQuery("body").removeClass('wsactive');
    });

    jQuery('.wsmenu > .wsmenu-list > li').has('.sub-menu').prepend('<span class="wsmenu-click"><i class="wsmenu-arrow"></i></span>');
    jQuery('.wsmenu > .wsmenu-list > li').has('.wsmegamenu').prepend('<span class="wsmenu-click"><i class="wsmenu-arrow"></i></span>');

    jQuery('.wsmenu-click').click(function () {
      jQuery(this).toggleClass('ws-activearrow')
        .parent().siblings().children().removeClass('ws-activearrow');
      jQuery(".wsmenu > .wsmenu-list > li > .sub-menu, .wsmegamenu").not(jQuery(this).siblings('.wsmenu > .wsmenu-list > li > .sub-menu, .wsmegamenu')).slideUp('slow');
      jQuery(this).siblings('.sub-menu').slideToggle('slow');
      jQuery(this).siblings('.wsmegamenu').slideToggle('slow');
    });

    jQuery('.wsmenu > .wsmenu-list > li > ul > li').has('.sub-menu').prepend('<span class="wsmenu-click02"><i class="wsmenu-arrow"></i></span>');
    jQuery('.wsmenu > .wsmenu-list > li > ul > li > ul > li').has('.sub-menu').prepend('<span class="wsmenu-click02"><i class="wsmenu-arrow"></i></span>');

    jQuery('.wsmenu-click02').click(function () {
      jQuery(this).children('.wsmenu-arrow').toggleClass('wsmenu-rotate');
      jQuery(this).siblings('li > .sub-menu').slideToggle('slow');
    });

    jQuery(window).on('resize', function () {

      if (jQuery(window).outerWidth() < 992) {
        jQuery('.wsmenu').css('height', jQuery(this).height() + "px");
        jQuery('.wsmenucontainer').css('min-width', jQuery(this).width() + "px");
      } else {
        jQuery('.wsmenu').removeAttr("style");
        jQuery('.wsmenucontainer').removeAttr("style");
        jQuery('body').removeClass("wsactive");
        jQuery('.wsmenu > .wsmenu-list > li > .wsmegamenu, .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu').removeAttr("style");
        jQuery('.wsmenu-click').removeClass("ws-activearrow");
        jQuery('.wsmenu-click02 > i').removeClass("wsmenu-rotate");
      }

    });

    jQuery(window).trigger('resize');

  });

  //Mobile Search Box
  jQuery(window).on("load", function () {
    jQuery('.wsmobileheader .wssearch').on("click", function () {
      jQuery(this).toggleClass("wsopensearch");
    });
    jQuery("body, .wsopensearch .wscloseicon").on("click", function () {
      jQuery(".wssearch").removeClass('wsopensearch');
    });
    jQuery(".wssearch, .wssearchform form").on("click", function (e) {
      e.stopPropagation();
    });
  });

}());

全体のcssです。

body {
  background-color: #f5f5f5;
}

.headerwp {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px;
  min-width: 320px;
}

.topbarbg {
  width: 100%;
  display: block;
  min-height: 214px;
  padding-top: 0px;
  background: url(../images/topbg.jpg) top center no-repeat;
  box-shadow: 0 0 20px rgba(0, 0, 0, .3);
}

.desktoplogo {
  padding: 49px 0px;
  margin: 0 auto;
  text-align: center;
}
.desktoplogo img{
  width:300px;
}




@media only screen and (min-width: 230px) and (max-width:991px) {
  .desktoplogo {
    display: none;
  }

  .topbarbg {
    background: none;
    box-shadow: none;
  }

  .swichermainbx {
    width: 96%;
    margin: 0% 2%;
    display: block;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 15px 25px;
    border-radius: 14px;
  }

  .swichermainleft {
    width: 98%;
    margin: 1% 1%;
  }

  .swichermainright {
    width: 98%;
    margin: 1% 1%;
  }

  .wscolorcode {
    width: 12.5%;
  }

  .swichertxt {
    display: none;
  }

  .swichertxt02 span {
    display: none;
  }

}

↓メニューだけのcssです。
css1つ目
https://harigami.jp/cd?hsh=2acb3522-665d-4853-a09f-05babd9500af
css２つ目
https://harigami.jp/cd?hsh=021f80bb-7d65-4621-a21d-1e6c55672288

Answer 1

.topbarbg{
  min-height: auto;
  height: 54px; 
}

Comments

[takawork]

ありがとうございます。
メディアクエリに貼ったらうまく行きました。