DMXzone Bootstrap 3 Navigation Support Product Page

Collapse menu button

Asked 15 Nov 2014 14:17:47
2
have this question
15 Nov 2014 14:17:47 David Woolley posted:
How do you put in a collapse menu button when in Extra Small Devices mode (i.e 3 horizontal bar icon)

I can do this manually:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs3-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>


then wrap this around the list:

<div class="collapse navbar-collapse" id="bs3-navbar-collapse-1">


But how do you do this from the bootstrap navigation tab?

If one selects the navbar then click the Add Collapse button, this code is inserted after the list:
<div class="collapse navbar-collapse" id="bs3-navbar-collapse-1"> </div>

Not sure how to add the collapse menu button from the extension.

Another thing:
If I add a button to the navbar, it is placed on a new line within the navbar. I have to move the <button> code to just after the list.Is this where it should be placed? I guess I have to customize the css to position it away from the Nav items.


Replies

Replied 15 Nov 2014 16:03:39
15 Nov 2014 16:03:39 Teodor Kuduschiev replied:
Hello David,
Please follow the tutorial explaining how to add a Navbar. It is explained there, how to achieve this, just follow it exactly.
I am not sure i understand your question/problem with the buttons in the navbar?
Replied 15 Nov 2014 22:27:05
15 Nov 2014 22:27:05 David Woolley replied:
Thanks Teodor
I see now that the Add Collapse should be done before adding the Nav. I should have gone through the tutorial more carefully - I thought one could just add the collapse after adding the nav.
The collapse button code is inserted in the correct place, but the code:

<div class="collapse navbar-collapse" id="bs3-navbar-collapse-1"> </div>

is inserted above the list, so I had to wrap it around the list, then it works.

I tried the tut again just in case, and it did exactly the same thing, so not ideal.

I'll get back to you about positioning the buttons in the navbar - I could not find any reference to this in the tuts.

Cheers
Dave
Replied 16 Nov 2014 12:04:49
16 Nov 2014 12:04:49 Teodor Kuduschiev replied:
The collapse option is not the collapse button. The collapse option adds a collapse container and you should add the nav inside it.
The collapse button is located in the "header".

Reply to this topic