Bootstrapのハンバーガーメニューがクリック前後で位置が違う

HTML,CSS,Bootstrapの質問です。
Bootstrapのハンバーガーメニューがクリック前後で位置がずれてしまいます。
目的はハンバーガーメニューをクリック後の位置にクリック前から配置することです。
間違いが分かる方いらしたら、指摘お願いします。

クリック前

クリック後

ソースコードはこちらです。

HTML
1  <nav class="navbar navbar-expand-md fixed-top navbar-dark">
2        <div class="container-fluid">
3          <a class="header-logo navbar-brand" href="#">
4            <img src="./img/logo/logo.png" alt="logo">
5          </a>
6          <button class="navbar-toggler" data-toggle="collapse" data-target="#navRes">
7            <span class="navbar-toggler-icon"></span>
8          </button>
9          <div class="collapse navbar-collapse" id="navRes">
10            <ul class="navbar-nav ml-auto">
11              <li class="nav-item active"><a class="nav-link" href="#">Card</a></li>
12              <li class="nav-item"><a class="nav-link" href="#">News</a></li>
13              <li class="nav-item"><a class="nav-link" href="#">Price</a></li>
14              <li class="nav-item"><a class="nav-link" href="#">Access</a></li>
15              <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
16            </ul>
17          </div>
18        </div>
19      </nav>