Multiple navbars collapse

[osc2nuke]

When require 2 navbars the data-target is not respected for the collapse navbar 1 uses default: data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" with the collapse element: <div class="collapse navbar-collapse" id="navbarNavDropdown"></div> navbar 2 uses default: data-target="#menuDropdown" aria-controls="menuDropdown" with the collapse element: <div class="collapse navbar-collapse" id="menuDropdown"></div>

The same "problematic" behavior can be seen on the demo pages when view the page in tablet/mobile viewport.

Even that the demo navigation bars have their own id's. Always the First navbar will be toggled, this is really really bad for me. https://demos.creative-tim.com/material-kit-pro/docs/2.0/components/navbar.html#color-schemes

[osc2nuke]

More research, it is not the toggling/collapse functionality. That works fine. But it load the content for the menu always from the first navbar.

[osc2nuke]

But it load the content for the menu always from the first navbar.

That's not a thumbs-up! It is broken! Al the ID's are in place, yet it ALWAYS load the content of the FIRST. So what is the meaning of specify id, to the collapsible elements, if it is ignored?

Keep in mind , no blaming here, it is only a report. what you made together is real cool. Why else i would have bought it.......... ( i felt in love with the card headers lol ). But it is a real bug.

[groovemen]

Hello @osc2nuke,

I tried to fix this bug but there are many things to change for having two or more navbars on the same page and open separately. We will prepare and fix this issue for the next bug; I just sent you an email with the details.

All the best, Stefan

[anthologyweb]

Has this issue been resolved? I am still experiencing the problem with expand/collapse behavior of multiple navbar instances on the same page as described by @osc2nuke.

[groovemen]

Hello @anthologyweb,

Thank you for your interest in working with our products, if you want to have multiple navbars on the same page, you have to change our navbar behavior so you got to make some changes. So, follow the next steps:

• replace the material-kit.js file with this one: material-kit.js.zip

• replace the assets/scss/material-kit/_responsive.scss file with this one: _responsive.scss.zip

• for the main navbar, you have to set this class: .main-nav and for the navbar-toggler button you have to set this ID: id="main-nav" like this:

<nav class="navbar navbar-color-on-scroll navbar-transparent main-nav fixed-top  navbar-expand-lg " color-on-scroll="100" id="sectionsNav">
   <div class="container">
     <div class="navbar-translate">
       <a class="navbar-brand"></a>
       <button class="navbar-toggler" id="main-nav" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
         <span class="sr-only">Toggle navigation</span>
         <span class="navbar-toggler-icon"></span>
         <span class="navbar-toggler-icon"></span>
         <span class="navbar-toggler-icon"></span>
       </button>
     </div>
     <div class="collapse navbar-collapse">
       <ul class="navbar-nav ml-auto">
         <li class="dropdown nav-item">...</li>
         <li class="dropdown nav-item">...</li>
         <li class="dropdown nav-item">...</li>
       </ul>
     </div>
   </div>
</nav>

**don't forget to recompile the scss after these changes! Hope that information helps you. Please let us know if we can help you with anything else.

All the best, Stefan