4

The twitter-bootstrap 'hero' example (http://twitter.github.io/bootstrap/examples/hero.html) works well. At the risk of describing the obvious... On small screens, when the navbar menu is activated, only the first-level items are visible, sub-items are collapsed. When an item with child items is tapped, the child items expand and become visible. They can also be collapsed by tapping the parent again.

I am using a bootstrap template on a Joomla site (http://wright.gvta.net/). Unfortunately, when the navbar is activated on a small screen, it expands the many subitems. Tapping a parent item does not expand/collapse its child items.

How do I get twitter-bootstrap navbar subitems to collapse/expand on small screens? What bootstrap code/files are responsible for this behaviour?

I know some css and javascript, but not enough to figure this out.

Thank you.

user2251091
  • 49
  • 1
  • 2

1 Answers1

0

You'll need the Bootstrap Collapse JS. Then you need a <div class="nav-collapse collapse"> that wraps your navbar. Finally, apply a data-toggle="collapse" attribute to a button that appears only on smaller screens using CSS media queries.

See the source code of this example for a working example

professormeowingtons
  • 3,504
  • 7
  • 36
  • 50