Jekyll and Bootstrap: навигационное меню на мобильном только переключается, не выбирает пункты меню

Question

Наше навигационное меню имеет три уровня, например:

Когда сайт просматривается на мобильном телефоне, меню сворачивается в кнопку гамбургера.При нажатии / прикосновении к нему отображаются элементы меню верхнего уровня, но прикосновение к любому из них просто скрывает меню.Я гуглил и не нашел много, чтобы помочь мне, какой-то старый пост 2012 года, где предлагалось взломать js и один на SO, где на постере были закрытые теги и ошибки типа смешанных кавычек ('').Я проверил свой код и не думаю, что у меня есть какие-либо из этих проблем. Я строю меню с помощью Liquid, но я не думаю, что это как-то связано с этим. Вот необработанный код:

<nav class="navbar navbar-default navbar-fixed-top">

<div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/index.html"><img src="/assets/images/logos/prebid_final.png"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">

            {% for item in site.data.dropdowns %}

            <li class="dropdown">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    {{ item.sectionName }}
                    <span class="caret" />
                </a> 

                <ul id="prebidDropDown" class="dropdown-menu">

                    {% for submenu in item.submenus %}

                    <li class="dropdown dropdown-submenu">
                        <a href="{{submenu.link}}">{{ submenu.title }}

                            {% if submenu.hasBubblePopOut == 1 %}
                                <span class="caret" />
                            {% endif %}
                        </a>

                        {% if submenu.hasBubblePopOut == 1 %}

                            <ul class="dropdown-menu">

                                {% for bubblePopOut in submenu.bubble %}

                                    <li><a href="{{bubblePopOut.link}}">{{bubblePopOut.title}}</a></li>

                                {% endfor %}

                            </ul>
                        {% endif %}
                    </li>

                    {% endfor %}
                </ul>

            </li>

            {% endfor %}

            <!-- end loop through top level nav-->   
        </ul>
        <!--end top level menu items-->         
    </div>
    <!--end navbar-->
</div>
<!--end container-->

Я могу опубликовать вывод html (он довольно длинный).

И мой navbar css:

    /* NavBar */

.navbar { 
    z-index:100
    font-family: 'Dosis', sans-serif;
}

.navbar-default {
  background-color: #FFFFFF;
  border-color: transparent;
  padding-top: 15px;
}

.navbar-default .navbar-brand {
  color: white;
}

.navbar-default .navbar-nav>li>a {
  color: #3498db;
  font-weight: 500;
  font-size: 24px;

}

.navbar-toggle {
  background: #fff;
}

.navbar-brand img { 
    max-width: 200px;
    max-height: 35px;
}

.navbar-brand{
    float:left;
    height:50px;
    padding:10px 15px;
    font-size:18px;
    line-height:20px}

/* DropDown*/

.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}
.dropdown-submenu:hover > a:after {
  border-left-color: #fff;
}
.dropdown-submenu.pull-left {
  float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
}

Возможно, я что-то упустил,был бы признателен за любую помощь.