Bootstrap Dropdown menu issue on mobile

I will need some help with the menu showing on mobile. When the STORE menu is clicked on mobile version it does not expand and instead closes the general menu. Here is the link of the web page. Any help will be appreciated.

<body> looks like

<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->

<body id="page-top" data-spy="scroll" data-target=".navbar">

JavaScript
​x
 
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->​<body id="page-top" data-spy="scroll" data-target=".navbar">​

Menu HTML

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse  header-transparent">
  <div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand page-scroll logo no-margin" href="#page-top"><img src="images/logo-uk.png"></a>
    <div class="collapse navbar-collapse " id="navbarNav">
      <ul class="navbar-nav ml-auto ">
        <li class="nav-item active">
          <a class="page-scroll nav-link" href="#page-top">HOME </a>
        </li>


        <li class="nav-item ">
          <a class="page-scroll nav-link" href="#frames"></a>
        </li>
        <li class="nav-item ">
          <a class="page-scroll nav-link" href="ppgtrikes.php"></a>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          STORE
        </a>
          <div class="dropdown-menu">
            <a class="page-scroll nav-link" href="#engines">
              <font color="#000000"></font>
            </a>
            <a class="page-scroll nav-link" href="#harnesses">
              <font color="#000000"></font>
              </a>
          </div>
        </li>
        <li class="nav-item ">
          <a class="page-scroll nav-link" href="#contact"></a>
        </li>
      </ul>
    </div>
  </div>
  <!-- End of Container -->
</nav>

JavaScript
 
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse  header-transparent">  <div class="container">    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">      <span class="navbar-toggler-icon"></span>    </button>    <a class="navbar-brand page-scroll logo no-margin" href="#page-top"><img src="images/logo-uk.png"></a>    <div class="collapse navbar-collapse " id="navbarNav">      <ul class="navbar-nav ml-auto ">        <li class="nav-item active">          <a class="page-scroll nav-link" href="#page-top">HOME </a>        </li>​​        <li class="nav-item ">          <a class="page-scroll nav-link" href="#frames"></a>        </li>        <li class="nav-item ">          <a class="page-scroll nav-link" href="ppgtrikes.php"></a>        </li>​        <li class="nav-item dropdown">          <a class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">          STORE        </a>          <div class="dropdown-menu">            <a class="page-scroll nav-link" href="#engines">              <font color="#000000"></font>            </a>            <a class="page-scroll nav-link" href="#harnesses">              <font color="#000000"></font>              </a>          </div>        </li>        <li class="nav-item ">          <a class="page-scroll nav-link" href="#contact"></a>        </li>      </ul>    </div>  </div>  <!-- End of Container --></nav>​

Answer

You have 2 Bootstrap navs, one inside the other.

UPDATED

In this file http://www.evoaviation.co.uk/js/custom.js you have part of code at the beginning

//Auto Close Responsive Navbar on Click
    function close_toggle() {
        if ($(window).width() <= 768) {
            $('.navbar-collapse a').on('click', function () {
                $('.navbar-collapse').collapse('hide');
            });
        }
        else {
            $('.navbar .navbar-inverse a').off('click');
        }
    }

JavaScript
 
//Auto Close Responsive Navbar on Click    function close_toggle() {        if ($(window).width() <= 768) {            $('.navbar-collapse a').on('click', function () {                $('.navbar-collapse').collapse('hide');            });        }        else {            $('.navbar .navbar-inverse a').off('click');        }    }​

Replace it with following

//Auto Close Responsive Navbar on Click
    function close_toggle() {
        if ($(window).width() <= 768) {
            // checking if there is no 'data-toggle' in <a>
            $('.navbar-collapse a:not([data-toggle])').on('click', function () {
                $('.navbar-collapse').collapse('hide');
            });
        }
        else {
            $('.navbar .navbar-inverse a').off('click');
        }
    }

JavaScript
 
//Auto Close Responsive Navbar on Click    function close_toggle() {        if ($(window).width() <= 768) {            // checking if there is no 'data-toggle' in <a>            $('.navbar-collapse a:not([data-toggle])').on('click', function () {                $('.navbar-collapse').collapse('hide');            });        }        else {            $('.navbar .navbar-inverse a').off('click');        }    }​

Advertisement

Answer