导航栏关闭图标无法正常工作

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>