I am unable to see your screen shots so I'll give you this.
There are certain elements expected by the JavaScript and CSS by default for bootstrap to automatically handle the collapsing of the nav to/from a hamburger view.
So it's is not necessarily easily done without using the already designed navbar, because you will effectively be recreating it anyways. It basically requires using the collapse plugin which is already included in the BSS apps bootstrap.js. However, to get it to look like and act like the navbar is where all the CSS comes in.
Here is a basic navbar
<*nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<*button class="navbar-toggle collapsed" data-target="#navcol-2" data-toggle="collapse">
<*span class="sr-only">Toggle navigation<*/span>
<*span class="icon-bar"><*/span>
<*span class="icon-bar"><*/span>
<*span class="icon-bar"><*/span>
<*/button>
</div>
<div id="navcol-2" class="collapse navbar-collapse">
<*ul class="nav navbar-nav">
<*li role="presentation">
<*a href="#">First Item<*/a>
<*/li>
<*li role="presentation">
<*a href="#">Second Item<*/a>
<*/li>
<*li role="presentation">
<*a href="#">Third Item<*/a>
<*/li>
<*/ul>
</div>
</div>
<*/nav>
Here is how I see it works.
Mostly the classes are there for styling, i.e. position/look and feel
When the site is large enough the menu is not displayed in hamburger view controlled by CSS
@media (min-width: 768px){
.navbar-toggle {
display: none;
}
}
When the site is wider then 768px then the hamburger menu i.e. the button with class=navbar-toggle
is hidden from view and the div with the class="navbar-collapse collapse"
is set as display=block
@media (min-width: 768px){
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
}
So when the sites width is less then 768px wide then the 2 media queries effectively no longer apply to the nav causing the button to come into view and the parent div of the UL to be hidden.
This is where the collapse plugin comes into play, all it does is that when you click the hamburger button it triggers the toggling of the parent div of the UL to become visible/hidden.
The parts of the HTML that are the data-/ID and the collapse classes are what the collapse plugin uses to know what to collapse/recollapse when you click the hamburger menu.
Now, literally you can take the HTML I posted and paste in as custom code then change all the places where the code says navbar
and change it to nav-bar
, you will lose nearly all the styling but keep the base functionality.
Just add the media query spots to get the hamburgering of the menu.
@media (min-width: 768px){
.nav-bar-toggle {
display: none;
}
}
@media (min-width: 768px){
.nav-bar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
}
To do that in the app here is how you do it.
Drag and drop the custom code component to your project. In the Layout View double click on the wording Custom Code, should open up the Custom Code tab section towards the bottom middle right of the app.
Clear out the custom code section then copy and paste my HTML code above into the custom code section. Remove all the *s, they are there so the forum doesn't break the code. Change all the navbar
references to nav-bar
.
Then in the HTML tab in the HTML pane on the middle left of app drill through and select the div with the class="nav-bar-toggle"
.
In the Design pane on the bottom right of the app click on Styles to expand and double click on your custom stylesheet. This will open it into the same area the custom code component is but with your custom stylesheet in view.
Click in the stylesheet where a thin blue line appears to create a new CSS rule. This will pre-populate the CSS rule, I'd say change it to just being .nav-bar-toggle
then hit your TAB key type in display
hit TAB key type in none
. To the right side of the CSS rule click on the three vertical dots and select "Add Media Query" change the media rule to min-width: 768px
Click the 3 dots again and select duplicate.
- Change the class rule to
.nav-bar-collapse.collapse
.
- Change property
display:none
to display:block !important
.
- Add property
height: auto !important;
- Add property
padding-bottom: 0;
- Add property
overflow: visible !important;
Now, you have an unstyled hamburger menu. You will need to add all the styling you want for how you want your menu to look.
Just so you know I actually did try this process out to figure out how it was working.
Saj