Bootstrap 3 Navbar dropdown problem I have included the navigation using Bootstrap 3 navbar. It is put together using Craft entries. I need the 'What we do' dropdown to be triggered when pressing the text or caret arrow but at the minute they are displaying as two different menu li as shown.

{% set entries = craft.entries.section('navigation') %}

&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-ptm" aria-expanded="false"&gt;
                &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="/"&gt;&lt;img src="{{ siteUrl }}assets/images/logo.png" width="300px;" alt="PTM Calibration Logo"/&gt;&lt;/a&gt;
        &lt;/div&gt;

        &lt;div class="collapse navbar-collapse navbar-right" id="collapse-ptm"&gt;
            {% nav entry in entries %}

            &lt;ul class="nav navbar-nav"&gt;
                &lt;li&gt;
                    &lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt; {% ifchildren %}
                    &lt;li class="dropdown"&gt;
                        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                        &lt;ul class="dropdown-menu"&gt;
                            {% children %}
                        &lt;/ul&gt;
                        {% endifchildren %}
                    &lt;/li&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            {% endnav %}
        &lt;/div&gt;
        &lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;
    &lt;!-- /.container-fluid --&gt;
&lt;/nav&gt;
If i'm understanding this correctly, it looks like you just have your loop starting a little early in the markup, so at the moment you are creating a new &lt;ul class="nav navbar-nav"&gt; item for every entry.

Does moving the {% nav entry in entries %} loop within the first &lt;ul&gt; help at all? like this:

&lt;ul class="nav navbar-nav"&gt;
 {% nav entry in entries %}
     &lt;li&gt;
        &lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;
        {% ifchildren %}
           &lt;li class="dropdown"&gt;
             &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
               {% children %}
              &lt;/ul&gt;
           &lt;/li&gt;
        {% endifchildren %}
     &lt;/li&gt;
 {% endnav %}
&lt;/ul&gt;


Additionally

Whilst writing this answer out I noticed that your {% endifchildren %} tag comes before a closing &lt;/li&gt; tag, so it might just be that:

&lt;ul class="nav navbar-nav"&gt;
  &lt;li&gt;
     &lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;
     {% ifchildren %}
       &lt;li class="dropdown"&gt;
         &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
           &lt;ul class="dropdown-menu"&gt;
              {% children %}
           &lt;/ul&gt;
          {# endifchildren was originally here #}
        &lt;/li&gt;
     {% endifchildren %}
  &lt;/li&gt;
&lt;/ul&gt;