Для nav-item присвоить идентификатор (к примеру bars), за ним (за закрывающим тэгом списка) кнопку создать и присвоить обработчик
onclick="myFunction()"
Примерно так выглядеть будет...
<button id="btnc" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation" onclick="myFunction()">
<span class="navbar-toggler-icon"></span>
</button>
Далее нам нужно к #bars присвоить по клику класс...Пускай будет snos
function myFunction() {
var element = document.getElementById("bars");
element.classList.toggle("snos");
}
Можно инлайн, можно внешним js файлом подключить.
После этого нужно прописывать стилевые свойства для .snos, учитывая его взаимодействия с соседями, если мы хотим чтобы при появлении этого класса изменялись стилевые свойства соседей.
Селекторы CSS в помощь тут!
//up
На тот случай, если вообще ничего не понятно,
вот ссылка на законсервированный и сырой проект.
Менюшка носитель этого кода, инструменты разработчика помогут усвоить инфу, что я подкинул.
