在bootstrap导航栏

Question

在我问之前，先了解一下我的项目。我正在使用wordpress和woocommerce作为后端和引导程序4以及一些插件来处理电子商务，以制作它的前端。

我的代码没问题。我的导航栏工作正常并集成。 woocommerce完全主题（我自己的主题）。我的徽章显示购物车中有多少产品。这也包含在导航栏中。

我无法弄清楚如何将此徽章放在我的购物车图标上，如下所示：

我意识到当我把代码放在wordpress＆gt; Menus中时，它确实没有用。

有人可以帮帮我吗？

前page.php文件

  <a class="navbar-brand" href="http://www.quickgames.com.br">
        <img src="<?php bloginfo('template_url'); ?>/img/logo.png" class="d-inline-block align-top" alt="">
  </a>

     <?php
     wp_nav_menu([
       'menu'            => 'top',
       'theme_location'  => 'top',
       'container'       => 'div',
       'container_id'    => 'bs4navbar',
       'container_class' => 'collapse navbar-collapse',
       'menu_id'         => false,
       'menu_class'      => 'navbar-nav mr-auto',
       'depth'           => 2,
       'fallback_cb'     => 'bs4navwalker::fallback',
       'walker'          => new bs4navwalker()
     ]);
     ?>

    <!-- code for the badge START-->
    <div style="align:left">
    <span class="badge badge-pill badge-warning"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
    </div>
    <!-- code for the badge END-->

    <form class="input-group">
      <input class="form-control" type="text" placeholder="Procurar Produtos...">
      <span class="input_group-btn">
      <button class="btn btn-navbar" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
      </span>
    </form>

   </nav>