1

I have a dynamic navigation consisting out of matrix and entries fields:

enter image description here

This then gets printed on the frontend as a dropdown.

No is it somehow possible to add a active class to the dropdown toplevel button?

Basicaly passing the active state back up to the toplevel button.

{% for dropNavi in block.dropdownNavi %} {% if loop.first %} <li class="dropdown {# that's where the class should end up #}"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> {{ block.seite }} <span class="caret"></span> </a> <ul class="dropdown-menu"> {% endif %} <li {# here adding an active class is easy #}> <a href="{{ dropNavi.url }}">{{ dropNavi.title }}</a> </li> {% if loop.last %}</ul>{% endif %} {% endfor %}

The problem is that this is a matrix field so there could be 3 or 6 or 5 dropdowns. Therefore the {{ loop.index }} does not work as a identifier. I can't see a way. Is this even possible?

I tried things like <li class="dropdown {% if craft.request.getLastSegement == dropNavi.url %}"> and various versions of this.

But stuff like this aplies an active class to all the dropdowns present. Never on the one containing the current url.

Improve this question

2 Answers 2

Reset to default
1 
<a href="{{ page.getUrl }}" {{craft.request.getSegment(2)|lower==page.slug|lower ? 'class=is-active'|e : ''}}> {{ page.title}} </a>

You can use something like this, only you compare your getSegment() with the related Title field instead of page.slug if your page in your url has the pagetitle name.

Improve this answer
1
  • Unfortunately slug and pagetitle are not the same Commented Nov 10, 2016 at 9:48
1

Heck! I just did it with jQuery:

$('.nav .dropdown-menu li.active').parents('li').addClass('activeParent');​

and that's that.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.