Навбар не рухнет Bootstrap v4.0.0-alpha.5

Я работаю на сайте с php заголовком & Нижний колонтитул в html-версии работает как charmin, но в php панель навигации не возвращается.

Вот мой заголовок кода:

    <div class="container">
<div class="row">
<div class="col-sm-3">
<div id="logo" class="float-xs-left">
<a class="navbar-brand" href="xxxxxxx/"><img src="img/logo-white.png" /></a>
</div>
</div>
<!--div class="col-sm-6" -->
<div class="float-xs-right">
<!--/div> --><!--cols:12   -->
<!--cols:12   -->
<div class="offcanvas">
<div class="navbar yamm col-lg-8 col-md-8 col-sm-6 ">
<div class="navbar-header">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".offcanvas.menu">
<i class="fa fa-bars"></i>
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</button>
</div>
<!-- outside -->
<div class="offcanvas menu right">
<div class="navbar-collapse collapse">
<button data-target=".offcanvas.menu" data-toggle="collapse" class="navbar-toggle" type="button">
</button>
<div class="nav navbar-nav">
<div class="list-group">
<!-- li><a href=""><span class="home">&#8962;</span></a></li -->
<a href="#"><img class="logo-img" src="img/logo-full.png" class="img-responsive" /></a>
<a href="index.php" class="list-group-item ">                    INICIO </a>
<a href="#p5" class="list-group-item " data-toggle="collapse">                 home <b class="fa fa-chevron-down"></b></a>
<div class="collapse" id="p5">
<a href="page-1.php" class="list-group-item">
Espresso                             </a>
<a href="page-2.php" class="list-group-item">
Clásico                             </a>
<a href="page-3.php" class="list-group-item">
Orgánico                            </a>
<a href="page-4.php" class="list-group-item">
Descafeinado                           </a>
<a href="page-5.php" class="list-group-item">
Toscana                           </a>
</div>
<a href="page-10.php" class="list-group-item ">                    </a>
<a href="page-11.php" class="list-group-item ">                    </a>
<a href="page-12.php" class="list-group-item ">                   </a>
<a href="#p6" class="list-group-item " data-toggle="collapse">                  <b class="fa fa-chevron-down"></b></a>
<div class="collapse" id="p6">
<a href="page-11.php" class="list-group-item">
</a>
</div>
<a href="#p4" class="list-group-item " data-toggle="collapse">                  <b class="fa fa-chevron-down"></b></a>
<div class="collapse" id="p4">
<a href="page-13.php" class="list-group-item">
item                             </a>
<a href="#c1" class="list-group-item" data-toggle="collapse">
another one<b class="fa fa-chevron-down"></b> <span class="cat_url" onclick="location.href='other.php'"><i class="fa fa-mail-forward"></i></span>                           </a>
<div class="collapse" id="c1">
<a href="page-14.php" class="list-group-item">name</a>
<a href="item-1.php" class="list-group-item">name</a>
<a href="item-2.php" class="list-group-item">name</a>
<a href="item.php" class="list-group-item">name</a>
<a href="item.php" class="list-group-item">name</a>
</div>
<a href="#" class="list-group-item">
other page                            </a>
<a href="#" class="list-group-item">
other page                              </a>
<a href="#" class="list-group-item">
other page                             </a>
<a href="page-15.php" class="list-group-item">
other name                          </a>
<a href="page.php" class="list-group-item">
name                          </a>
<a href="page.php" class="list-group-item">
name                            </a>
<a href="#" class="list-group-item">
name                           </a>
</div>
<a href="#p7" class="list-group-item " data-toggle="collapse">                  page title <b class="fa fa-chevron-down"></b></a>
<div class="collapse" id="p7">
<a href="page-16.php" class="list-group-item">
Name                          </a>
<a href="page-17.php" class="list-group-item">
name                             </a>
</div>
<a href="#" class="list-group-item ">                   page </a>
</div>
<br/>

</div>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<div class="pusher"></div>
<!-- end outside -->
</div>
</div>
</div>
<!--cols:12   -->
<div class="navbar yamm    ">
<div class="navbar-header hidden-lg-up">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-toggleable-md collapse">
<ul class="nav navbar-nav">
<!-- li><a href=""><span class="home">&#8962;</span></a></li -->
<li class="nav-item                                                                         ">
<a href="contacto.php" >Contáctanos</a>
</li>
<li class="nav-item                                                                         ">

</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
</div>

</header>

В консоли получим эту ошибку:

document.querySelector( "#nav-toggle" )
.addEventListener( "click", function() {
this.classList.toggle( "active" );
});

Кто-нибудь знает, в чем проблема и как я могу это исправить?

решаемая

Проблема заключалась в заголовке нижнего колонтитула и страницах, вызывающих один и тот же файл, поэтому при вызове функции состояние не возвращается, поскольку повторите действие 3 раза