Html 带图标的Bootstrap 5导航栏设计

我尝试使用响应性引导5导航栏模拟此设计：

到目前为止，我已经使用了ff HTML代码：

  <header id="header" class="header header-container clearfix">
                <div class="container clearfix" id="site-header-inner">


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="https://i.imgur.com/plBMnae.png" alt="image" width="107" height="24" </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">SHOP</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">FAQ</a>
        </li>

       <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
      </ul>

 
                         <ul class="menu-extra">
                        <li class="box-login">
                            <a class="icon_login" href="#"></a>
                        </li>
                        <li class="box-cart nav-top-cart-wrapper">
                            <i class="fa fa-shopping-cart"></i>
                        </li>

                        <li class="box-cart nav-top-cart-wrapper">
                            <i class="fas fa-user"></i>
                        </li>
                    </ul>
 
    </div>
  </div>
</nav>

                </div>
            </header>

当您将鼠标悬停在circle cart图标的顶部时，它将显示以下下拉列表：

到目前为止，我已经尽了最大努力在这里玩：

但我的设计结果却不一样。你知道如何在Bootstrap5Navbar中重新创建这个设计吗？如有必要，请出示JSFIDLE，以便我可以查看我的错误

.header-style-2.header-center .menu-extra > li,
.header-style-2.header-center #mainnav > ul >li > a,
.header-absolute .menu-extra > li,
.header-absolute #mainnav > ul >li > a {
    line-height: 98px;
}