创建在手机上表现为手风琴的“ sub-navbar”

Question

我有一个可切换的导航栏，我想创建某种子菜单，但我不希望它成为下拉菜单。我希望它有点像第二个导航栏，其中项目水平对齐。那部分很好，但是我希望它成为移动设备上的某种手风琴。我不知道如何正确解释它，但是您可以在下面看到我的意思：

我有一个常规的引导导航栏：

 <nav class="navbar navbar-expand-md navbar-light bg-custom fixed-top">
     <div class="container-fluid">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarResponsive">
             <ul class="navbar-nav mx-auto">
                 <li class="nav-item">
                     <a class="nav-link" href="<?php echo home_url(); ?>">Home</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link active" href="#">Artistas :: <span><?php the_title(); ?></span></a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="<?php echo home_url(); ?>#agenda">Agenda</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="<?php echo home_url(); ?>#sobre">Sobre</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="#contato">Contato</a>
                 </li>
             </ul>
         </div>
     </div>
 </nav>

有什么想法吗？我应该在导航栏中添加“ sub-navbar”吗？