I am trying to create a responsive Bootstrap 3 based navbar with two rows. However, I am having trouble with the structure of the HTML and the collapse functionality.
Below is a visual description of the desired result, and I was hoping someone could point me in the right direction in terms of HTML/CSS (with as much default Bootstrap functionality as possible).
Essentially the menu is desired to do the following:
On tablet/desktop devices, the first row is the logo and a menu of small secondary links (Link1-3). The second row is the main menu with main links (LinkA-E).
On mobile, the classic collapse design should appear with the logo and hamburger icon. The expanded menu should show the main links (LinkA-E) first, and then the secondary links (Link1-3) last.
Tablet/Desktop device:
|----------------------------------------------------------|
| LOGO/BRAND Link1 Link2 Link3 |
|----------------------------------------------------------|
| LinkA LinkB LinkC LindD LinkE |
|----------------------------------------------------------|
Mobile device (collapsed):
|--------------------------------------|
| LOGO/BRAND HAMBURGER |
|--------------------------------------|
Mobile device (expanded):
|--------------------------------------|
| LOGO/BRAND HAMBURGER |
|--------------------------------------|
| LinkA |
| LinkB |
| LinkC |
| LinkD |
| LinkE |
|--------------------------------------|
| Link1 |
| Link2 |
| Link3 |
|--------------------------------------|