How to use the same Bootstrap header for two different menus

Question

I have on my page one header library bootstrap and in it I am using two menus but with the same calls, when resizing the page are displayed two icons but always calls the two menus, I would like to be called each independent menu, I tried to make the changes changing the names of the calls but the result was not as expected, I tried to do this in one of the attempts:

.navbar-default-2 {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
.navbar-default .navbar-default-2 .navbar-brand {
  color: #777777;
}

The developing page is this: Access to the project

I think I’m changing something in the wrong place.

Answer 1

This doubt is linked to JS and not to CSS. The way to solve this would be by setting a 'name' for each menu.

For example:

<a class="btn btn-navbar" data-toggle="collapse" data-target="#one">
<a class="btn btn-navbar" data-toggle="collapse" data-target="#two">

And in his definition:

<div id="one" class="nav-collapse">
    <!-- resto do primeiro menu aqui -->
</div>
<div id="two" class="nav-collapse">
    <!-- resto do segundo menu aqui -->
</div>

So you determine which one you want to open, with a certain button.

Link demonstrating the operation: https://jsfiddle.net/sz7j8fLo/2/