Back to Flat UI Support

keirs14500
keirs14500

Hi there. It doesn't seem like the adding of the "active" class for the nav item belonging to the current page is working. Is anyone else having any trouble with this, or ideas how to fix it? In the nav partial, on line 57 seems to be where this should be happening, but only the "dropdown" class gets applied, not the "active" class.

Any help welcome :)

justinzjones36733
justinzjones36733

I had the same issue. I fixed it by checking what the current page is: {% set currentPage = this.page.id %}

Then passing this to the macro: {% macro render_menu(links, currentPage) %}

Ensure that you pass currentPage as a parameter when the macro is called. It's called twice: {{ nav.render_menu(links, currentPage) }} {{ subnav.render_menu(link.sublinks, currentPage) }}

The macro checks for currentPage and sets the class to 'active' if it finds it. Unfortunately that doesn't also fix it for sub menu list items so I added an extra loop to check if the sub menu is == currentPage.

The Macro becomes: {% macro render_menu(links, currentPage) %}

{% import _self as subnav %}

{% for code, link in links %}

    <li class="

        {% if link.sublinks %}

            {% for sub, sublink in link.sublinks %}

                {{ (sub == currentPage)  ? 'active' }}  {{ link.sublinks ? 'dropdown' }} 

            {% endfor %}

        {% else %}

            {{ (code == currentPage)  ? 'active' }}  {{ link.sublinks ? 'dropdown' }}

        {% endif %}"
    >
        <a
            href="{{ link.sublinks ? '#' : (link.page ?: link[0])|page }}"
            {% if link.sublinks %}data-toggle="dropdown"{% endif %}
            class="{{ link.sublinks ? 'dropdown-toggle' }}"
        >
            {{ link.name ?: link[1] }}
            {% if link.sublinks %}<span class="caret"></span>{% endif %}
        </a>
        {% if link.sublinks %}
            <span class="dropdown-arrow"></span>
            <ul class="dropdown-menu">
                {{ subnav.render_menu(link.sublinks, currentPage) }}

            </ul>
        {% endif %}

    </li>

{% endfor %}

{% endmacro %}

1-2 of 2