Значок закрытия панели навигации не работает должным образом

Question

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

CSS:

.navbar-toggler>.close {
    display:inline;
}
.navbar-toggler.collapsed>.close, .navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
     display:none;
}

Файл HTML-

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top  navbar-custom">
<!--Brand in navigation menu-->     
  <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="my-1 mx-2 close">X</span>
    <span class="navbar-toggler-icon"></span>
    <span class="sr-only">Toggle navigation</span>
    <i class="fa fa-bars" aria-hidden="true"></i> Menu
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav ml-auto">

      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Wall Art</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Frames</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Desk Photos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Support</a>
      </li>
    </ul>

  </div>
</nav>