Bootstrap Dropdown menu issue on mobile

Question

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">

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>

Answer 1

You have 2 Bootstrap nav s, 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');
        }
    }

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');
        }
    }

Bootstrap Dropdown menu issue on mobile

Question

1 answers

solution1
0 ACCPTED 2020-07-04 20:29:45

Bootstrap Dropdown menu issue on mobile

Question

1 answers

solution1 0 ACCPTED 2020-07-04 20:29:45

solution1
0 ACCPTED 2020-07-04 20:29:45