Мобильное меню, фон во всю ширину открывается с задержкой

Надо что бы в мобильном меню при его раскрытие, желтая полоска открывался вместе с основным меню, а не после его полного разворачивания.

https://codepen.io/Mymik/pen/rvjxBN

<div>
<nav class="top-menu navbar navbar-expand-lg  btco-hover-menu ">
<button style="width:25px; height:25px; background:red" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav navbar-top-menu">
<div class="bg-left-grey"></div>
<li class="nav-item"> <a class="nav-link" href="/">1</a> </li>
<li class="nav-item"> <a class="nav-link" href="/news">2</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">3</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">4</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">5</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">6</a> </li>
</ul>
</div>
</div>

Буду благодарен за помощь.