Bootstrap + Wordpress + Timber - wordpress

Question

Are there any tutorials or templates created with wordpress+timber+bootstrap?
I'm having problem with the menu...
menu-head.twig:
<nav class="navbar navbar-custom">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
{% include "menu.twig" with {'menu': menu.get_items} %}
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
menu.twig:
{% if menu %}
<ul class="nav navbar-nav navbar-right">
{#
<li>Link</li>#} {% for item in menu %}
<li class="{{item.classes | join(' ')}}">
{{item.title}} {% include "menu.twig" with {'menu': item.get_children} %}
</li>
{% endfor %}
</ul>
{% endif %}
and the unfortunate result is this one:
I don't know how to implement it with the child menus being shown as dropdown menus... please help...
EDIT: I will be moving to foundation... :)

Answer 1

#manson-mamaril you're just missing a small bit in menu.twig. Instead of {% for item in menu %} it should be {% for item in menu.get_items %}:
{% if menu %}
<ul class="nav navbar-nav navbar-right">
{#
<li>Link</li>#}
{% for item in menu.get_items %}
<li class="{{item.classes | join(' ')}}">
{{item.title}}
{% include "menu.twig" with {'menu': item.get_children} %}
</li>
{% endfor %}
</ul>
{% endif %}

Answer 2

I came across a blog post from about a year ago while searching for WP-Timber-Foundtion 6 info.
http://kmturley.blogspot.com/2015/01/wordpress-timber-twitter-bootstrap.html

Answer 3

Something like this should work
<div class="collapse navbar-collapse" id="navbarmain">
<ul class="nav navbar-nav main-menu">
{% for item in menu.get_items %}
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="{{item.get_link}}">{{item.title}}<b class="caret"></b></a>
{% if item.get_children %}
<ul class="dropdown-menu" role="menu">
{% for child in item.get_children %}
<li>{{child.title}}</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>

Answer 4

In your menu-head.twig, replace {% include "menu.twig" with {'menu': menu.get_items} %} by {% include "menu.twig" with {'menu': menu} %}
Then, in your menu.twig
{% if menu %}
<ul class="nav navbar-nav navbar-right">
{#
<li>Link</li>#} {% for item in menu.items %}
<li class="{{item.classes | join(' ')}}">
{{item.title}} {% include "menu.twig" with {'menu': item.get_children} %}
</li>
{% endfor %}
</ul>
{% endif %}
You should iterate trough menu.items which is an array containing all your menu items.
By the way, make sure, you pass your menu to the context :
$context['menu'] = new \Timber\Menu(ID);
Finally, if you easily want to see what happens in you menu object, you can display this object with menu|print_r