Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-29T13:15:03.583Z
Answers.Text: 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.
Answers.UserDisplayName: itisconor
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-29T12:27:49.923Z
Answers.LastActivityDate: 2015-07-29T12:27:49.923Z
Answers.UserDisplayName: Chase Giunta
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-29T09:19:52.653Z
Answers.Text: 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.
Answers.UserDisplayName: itisconor
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-29T08:31:32.307Z
Answers.LastActivityDate: 2015-07-29T08:39:22.483Z
Answers.LastEditDate: 2015-07-29T08:39:22.483Z
Answers.UserDisplayName: Alec Ritson
Body: <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>
  
Tags: <templating><entries><structure><navigation>
Title: Bootstrap 3 Navbar dropdown problem
ThreadText: # 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') %}
  
  <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-ptm" 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="/"><img src="{{ siteUrl }}assets/images/logo.png" width="300px;" alt="PTM Calibration Logo"/></a>
          </div>
  
          <div class="collapse navbar-collapse navbar-right" id="collapse-ptm">
              {% nav entry in entries %}
  
              <ul class="nav navbar-nav">
                  <li>
                      <a href="{{ entry.url }}">{{ entry.title }}</a> {% ifchildren %}
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
                          <ul class="dropdown-menu">
                              {% children %}
                          </ul>
                          {% endifchildren %}
                      </li>
                  </li>
              </ul>
              {% endnav %}
          </div>
          <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
  </nav>
  
  ```
  
  [![enter image description here](https://i.sstatic.net/iGqJl.png)](https://i.sstatic.net/iGqJl.png)
  
  **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 `<li class="dropdown">` is being toggled on the children. The .dropdown class needs to be added on the parent `<li>` 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 `<ul class="nav navbar-nav">` item for every entry.
  
  Does moving the `{% nav entry in entries %}` loop within the first `<ul>` help at all? like this:
  
  ```
  <ul class="nav navbar-nav">
   {% nav entry in entries %}
       <li>
          <a href="{{ entry.url }}">{{ entry.title }}</a>
          {% ifchildren %}
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                 {% children %}
                </ul>
             </li>
          {% endifchildren %}
       </li>
   {% endnav %}
  </ul>
  
  ```
  
  **Additionally**
  
  Whilst writing this answer out I noticed that your `{% endifchildren %}` tag comes before a closing `</li>` tag, so it might just be that:
  
  ```
  <ul class="nav navbar-nav">
    <li>
       <a href="{{ entry.url }}">{{ entry.title }}</a>
       {% ifchildren %}
         <li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
             <ul class="dropdown-menu">
                {% children %}
             </ul>
            {# endifchildren was originally here #}
          </li>
       {% endifchildren %}
    </li>
  </ul>
  
  ```
  
  > **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.  
  
  ---
  
  