How to remove the space between navbar toggle menu collapse and header - css

Question

I'm using Bootstrap v4.0 for my site, and I have made a basic navbar which goes like this
(Codepen link).
And the problem with this menu is that, when you minimize the page to see how this nav works in md and sm devices, it shows a space between the navbar and the header:
see this image
So my question is, how to remove this space?
Here is the html code:
<nav class="navbar navbar-expand-lg navbar-custom BKoodakBold">
<img id="img1" class="hidden-xs" src="img/letter-logo.png" width="100" height="100"></img><script>rotateAnimation("img1",30);</script><img id="img2" src="img/text-logo.png" width="300" height="100"></img>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbarMd">
<i class="fa fa-bars fa-lg py-1 text-white"></i>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbarMd">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
فروشگاه
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">ویژه</a>
<a class="dropdown-item" href="#">پایین ترین قیمت ها</a>
<a class="dropdown-item" href="#">مرور کردن</a>
<a class="dropdown-item" href="#">ساخت سلاح</a>
<a class="dropdown-item" href="#">پوشاک</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">تجارت</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
راهنما
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">پرسش و پاسخ</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
جامعه
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">وبلاگ</a>
<a class="dropdown-item" href="#">کاتالوگ</a>
<a class="dropdown-item" href="#">درباره</a>
<a class="dropdown-item" href="#">لیست قیمت</a>
<!-- <a class="dropdown-item" href="#">API Documentation</a>
<a class="dropdown-item" href="#">npm package</a> -->
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">مالی</a>
</li>
<button class="btn BJadidBold">ورود/ عضویت</button>
</ul>
</div>
</nav>
I have searched the forum to find a related problem, but I couldn't find anything useful. So it would be best if you can help me with that..
Thanks in advance :)

Answer 1

This space is the overflow of .navbar-custom.
You have to change the height:100px; to auto in media query.
#media only screen and (max-width: 992px) {
.navbar-custom {
height:auto;
}
}
Note:Place media query to bottom of your normal css. In codepen its on
top.