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?
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:
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
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".
The collapse button is located in the "header".