How to use the same Bootstrap header for two different menus

Question

How to use the same Bootstrap header for two different menus

Navigation

#1 by (3 votes)

2

I have in my page a header of library bootstrap and in it I am using two menus but with the same calls, when resizing the page two icons are displayed but always calls the two menus, I would like each menu to be called independent , I tried to make the changes changing the names of the calls but the result was not 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 page under development is this: Access to the project

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

css

asked by anonymous 11.11.2015 / 21:37

1 answer

How to insert an else to display message in case there are no files to upload Modal Jquery does not open

score 3 · Accepted Answer

Your question is linked to JS, not CSS. The way to resolve 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 the definition of it:

<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 particular button.

Link demonstrating operation: link