0

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

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>
| improve this answer | |
  • 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 Jul 29 '15 at 9:19
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.

| improve this answer | |
  • 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 Jul 29 '15 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.