<p>I'm viewing this on a phone on a plane right now (forgive the terrible explanation), but it looks like your <code>&lt;li class="dropdown"&gt;</code> is being toggled on the children. The .dropdown class needs to be added on the parent  <code>&lt;li&gt;</code> item. </p>

<p>Because it is being toggled on the first child, that is why your caret is being rendered as a separate nav link.</p>

CC BY-SA 3.0
2015-07-29T13:15:03.583Z
I actually tried moving it to the parent <li> item and then removing the .dropdown class completely and it doesn't change at all. The caret is still rendered separately unfortunately.
itisconor
CC BY-SA 3.0
2015-07-29T12:27:49.923Z
2015-07-29T12:27:49.923Z
Chase Giunta
<p>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 <code>&lt;ul class="nav navbar-nav"&gt;</code> item for every entry.</p>

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

<pre><code>&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;
</code></pre>

<p><strong>Additionally</strong></p>

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

<pre><code>&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;
</code></pre>

CC BY-SA 3.0
2015-07-29T09:19:52.653Z
I tried both answers above but they don't seem to change it at all. The <ul class="nav navbar-nav"> is being duplicated for each entry which isn't ideal. If I could just get the dropdown arrow 'caret' to join the entry with the dropdown items and not make it's own entry it would work ok.
itisconor
CC BY-SA 3.0
2015-07-29T08:31:32.307Z
2015-07-29T08:39:22.483Z
2015-07-29T08:39:22.483Z
Alec Ritson
<p>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.</p>

<pre><code>{% 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;
</code></pre>

<p><a href="https://i.sstatic.net/iGqJl.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/iGqJl.png" alt="enter image description here"></a></p>

<templating><entries><structure><navigation>
Bootstrap 3 Navbar dropdown problem
# Bootstrap 3 Navbar dropdown problem

(Asked by: username_0 on 2015-07-28)

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') %}


    
        
            
                Toggle navigation
                
                
                
            
            
        

        
            {% nav entry in entries %}

            
                
                    {{ entry.title }} {% ifchildren %}
                    
                        
                        
                            {% children %}
                        
                        {% endifchildren %}
                    
                
            
            {% endnav %}

**Tags:** templating, entries, structure, navigation

---

## 2 answers

### Answer by username_1 on 2015-07-29. Score: 2

I'm viewing this on a phone on a plane right now (forgive the terrible explanation), but it looks like your  is being toggled on the children. The .dropdown class needs to be added on the parent  item.

Because it is being toggled on the first child, that is why your caret is being rendered as a separate nav link.

> **Comments:**
> **username_0**: I actually tried moving it to the parent <li> item and then removing the .dropdown class completely and it doesn't change at all. The caret is still rendered separately unfortunately.  

---

### Answer by username_2 on 2015-07-29. Score: 2

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  item for every entry.
Does moving the {% nav entry in entries %} loop within the first  help at all? like this:

 {% nav entry in entries %}
     
        {{ entry.title }}
        {% ifchildren %}
           
             
              
               {% children %}
              
           
        {% endifchildren %}
     
 {% endnav %}


Additionally
Whilst writing this answer out I noticed that your {% endifchildren %} tag comes before a closing  tag, so it might just be that:

  
     {{ entry.title }}
     {% ifchildren %}
       
         
           
              {% children %}
           
          {# endifchildren was originally here #}
        
     {% endifchildren %}

> **Comments:**
> **username_0**: I tried both answers above but they don't seem to change it at all. The <ul class="nav navbar-nav"> is being duplicated for each entry which isn't ideal. If I could just get the dropdown arrow 'caret' to join the entry with the dropdown items and not make it's own entry it would work ok.  

---

