Navbar collapse problem

[salinasrh]

Hi, if I add more than one navbar in the same webpage, when I click on navbar-toggler button, allways display the first navbar content menu. You can see the problem, even here: https://demos.creative-tim.com/paper-kit-2-pro/docs/1.0/components/navbar.html Please, can you help me? Thanks!

[groovemen]

Hello @salinasrh, thank you for using our products, please set for each .navbar-collapse from the navbars an unique ID e.g. id="navbar" and for each navbar's .navbar-toggler button, set the corresponding attribute with the collapse ID e.g.data-target="#navbar" for each navbar.

<nav class="navbar navbar-expand-lg">
  <div class="container">
    <div class="navbar-wrapper">
      <a class="navbar-brand" href="#pablo">Brand</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-bar burger-lines"></span>
        <span class="navbar-toggler-bar burger-lines"></span>
        <span class="navbar-toggler-bar burger-lines"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse justify-content-end" id="navbar">
      <ul class="navbar-nav">
        <li class="nav-item ">
          <a href="register.html" class="nav-link">
           Register
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

All the best, Stefan

[salinasrh]

Hi Stefan, I applied your suggestion and I still have problems. When viewing the website from a mobile device and clicking on the button to see the menu, I only see the second menu collapse block. Here is the code:

<nav class="navbar navbar-expand-lg">
        <div class="container">
            <div class="navbar-wrapper">
                <a class="navbar-brand" href="#pablo">Brand 1</a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-bar burger-lines"></span>
                    <span class="navbar-toggler-bar burger-lines"></span>
                    <span class="navbar-toggler-bar burger-lines"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse justify-content-end" id="navbar1">
                <ul class="navbar-nav">
                    <li class="nav-item ">
                        <a href="register.html" class="nav-link">
                            Content 1
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <div class="navbar-wrapper">
                <a class="navbar-brand" href="#pablo">Brand 2</a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-bar burger-lines"></span>
                    <span class="navbar-toggler-bar burger-lines"></span>
                    <span class="navbar-toggler-bar burger-lines"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse justify-content-end" id="navbar2">
                <ul class="navbar-nav">
                    <li class="nav-item ">
                        <a href="register.html" class="nav-link">
                            Content 2
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Best regards, Rodrigo.

[salinasrh]

Hi, any news about using multiple navbars? I had to delete all navbar .css and .js content to make them work. Regards, Rodrigo.

[salinasrh]

Any update here?