मुझे मोबाइल पर दिखाई देने वाले मेनू में कुछ मदद की आवश्यकता होगी। जब स्टोर मेनू को मोबाइल संस्करण पर क्लिक किया जाता है तो यह विस्तारित नहीं होता है और इसके बजाय सामान्य मेनू को बंद कर देता है। यहाँ वेब पेज का लिंक है। किसी भी तरह की सहायता को आभार समझेंगे।

<body> दिखता है

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

मेनू एचटीएमएल

<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>
1
Simeon Arsov 4 जुलाई 2020, 22:39

1 उत्तर

सबसे बढ़िया उत्तर

आपके पास 2 बूटस्ट्रैप navs हैं, एक दूसरे के अंदर।

अपडेट किया गया

इस फ़ाइल में http://www.evoaviation.co.uk/js/custom.js आपके पास शुरुआत में कोड का एक हिस्सा है

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

इसे निम्नलिखित के साथ बदलें

//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');
        }
    }
0
focus.style 4 जुलाई 2020, 23:55