Bootstrap navbar mobile friendly目前未显示我的任何列表项

Question

我有一个使用Bootstrap CSS的HTML页面。我的导航栏设计得很完美，我想在浏览器中使用。我正在尝试使导航移动友好。现在，我拥有的代码显示了导航栏图标，但是当您单击它时，它不显示导航栏中的项目。

我当前的浏览器格式是 主页关于我们服务徽标团队案例研究联系我们

徽标当前是导航栏中的列表项。当谈到移动友好。我如何以显示所有导航栏项目的方式来执行此操作，这些项​​目包括首页，关于我们，服务，团队，案例研究，与我们联系。并在左侧而不是导航栏的一部分显示徽标。

 <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon">
            </span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">

                <li id="firstli">
                    <a class=" js-scroll-trigger selected" href="#about">HOME</a>
                </li>
                <li id="secondli">
                    <a class="js-scroll-trigger" href="#services">ABOUT US</a>
                </li>
                <li id="thirdli">
                    <a class="js-scroll-trigger" href="#portfolio">SERVICES</a>
                </li>
                                    <li class="nav-item">
                          <a class="" href="#page-top">
         <img id="logo" src="img/Logo.png" />

    </a>
                </li>

            </ul>
        </div>
    </div>
</nav>




     <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="Nav1">

    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="Div1">
            <ul class="navbar-nav ml-auto">

                <li id="fourthli">
                    <a class="js-scroll-trigger" href="#contact">TEAM</a>
                </li>
                                   <li id="penultli">
                    <a class="js-scroll-trigger" href="#contact">CAST STUDIES</a>
                </li>
                               <li id="lastli">
                    <a class="js-scroll-trigger" href="#contact">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

请注意，我有两个导航栏-徽标左侧的列表项（包括徽标）。并在徽标右侧列出项目。我这样做是为了以特定方式放置所有列表项。

引导CSS和JS文件：