0

I'm having a hard time getting our navigation to output properly. Anyone mind helping me fix whatever I've done wrong here?

Here's how the original, untouched code look like:

<!-- Main Navigation -->
            <div class="contain-to-grid fixed">
                <nav class="top-bar" data-topbar role="navigation">
                    <ul class="title-area">
                        <li class="name">
                            <h1><a href="#"><i class="fa fa-home fa-fw"></i> {{ siteUrl }}</a></h1>
                        </li>
                        <li class="toggle-topbar menu-icon">
                            <a href="#"><span>Menu</span></a>
                        </li>
                    </ul>

                    <section class="top-bar-section">
                        <!-- Right Nav Section -->
                        <ul class="right">
                            <li class="active"><a href="#">Right Button Active</a></li>
                            <li class="has-dropdown"><a href="#">Right Button Dropdown</a>
                                    <ul class="dropdown">
                                        <li><a href="#">First link in dropdown</a>
                                            <li class="has-dropdown"><a href="#">Right Button sub-Dropdown</a>
                                                <ul class="dropdown">
                                                    <li><a href="#">First link in sub-dropdown</a></li>
                                                    <li class="active"><a href="#">Second (Active) link in sub dropdown</a></li>
                                                </ul>
                                            </li>
                                        </li>
                                        <li class="active"><a href="#">Second (Active) link in dropdown</a></li>
                                    </ul>
                            </li>
                        </ul>
                </nav>
            </div>
<!-- /Main Navigation -->

And here's my attempt at solving it (with the help of an other thread in here)

 <!-- Main Navigation -->
            <div class="contain-to-grid fixed">
                <nav class="top-bar" data-topbar role="navigation">
                    <ul class="title-area">
                        <li class="name">
                            <h1><a href="#"><i class="fa fa-home fa-fw"></i> {{ siteUrl }}</a></h1>
                        </li>
                        <li class="toggle-topbar menu-icon">
                            <a href="#"><span>Menu</span></a>
                        </li>
                    </ul>

                    <section class="top-bar-section">
                        <!-- Right Nav Section -->
                        <ul class="right">

                            {# Get top-level entries in pages structure (exclude home page)  #}
                            {% set pages = craft.entries.section('pages').id('not 1').level(1) %}

                            {# Loop through top-level entries #}
                            {% for page in pages %}

                            {# Check if entry has descendants #}
                            {% if not page.hasDescendants %}

                            {# List navigation item if entry has NO child entries #}
                            <li class="active">
                                <a href="{{ page.getUrl }}">{{ page.title }}</a>
                            </li>

                            {% else %}

                            {# List navigation item if entry DOES have child entries #}
                            <li class="has-dropdown"><a href="{{ page.getUrl }}">{{ page.title }}</a>
                                    <ul class="dropdown">

                                    {# Get child entries of current iteration's top-level entry #}
                                    {% set subPages = page.getChildren() %}

                                    {# Loop through those 2nd-level entries #}
                                    {% for subPage in subPages %}

                                        {# This is the place where you'd nest the next menu hierarchy !! #}

                                        {# List sub-menu navigation item #}
                                        <li><a href="{{ subPage.getUrl }}">{{ subPage.title }}</a></li>

                                    {% endfor %}

                                    </ul>
                            </li>
                            {% endif %}
                        </ul>
                    {% endfor %}

                </nav>
            </div>
<!-- /Main Navigation -->

EDIT:

<!-- Main Navigation -->
            <div class="contain-to-grid fixed">
                <nav class="top-bar" data-topbar role="navigation">
                    <ul class="title-area">
                        <li class="name">
                            <a href="#"><i class="fa fa-home fa-fw"></i>
                                {% set image = entry.logo.first() %}
                                {% if image %}
                                <img src="{{ image.getUrl( logo ) }}" alt="{{ image.link }}">
                                {{ endif }}
                            </a>
                        </li>
                        <li class="toggle-topbar menu-icon">
                            <a href="#"><span>Meny</span></a>
                        </li>
                    </ul>


                    <!-- Right Nav Section -->
                    <section class="top-bar-section"><ul class="right">
                        {{ craft.amNav.getNav("mainMenu", {
                            id: 'navigation',
                            class: 'right',
                            classActive: 'active',
                            classChildren: 'has-dropdown',
                            classLevel2: 'dropdown',
                            classLevel3: 'dropdown',
                        }) }}

I ended up solving it this way instead.

2
  • dev.filadelfiavennesla.no looks good now! :D
    – carlcs
    May 22 '15 at 7:16
  • Yeah, but only after going with a 3rd party plugin. Native way was way over my head unfortunately. :P
    – Filadelfia
    May 22 '15 at 7:50
1

You forgot to close the <section class="top-bar-section"> tag, have a look at your inspector to see what this does. And you should better have some logic to output active class to just one menu item. As these are all entries of your structure, you should probably solve this with a comparison like this:

{% set active = entry.id == page.id ? 'class="active"' %}

and then add that to your list items:

<li {{ active }}>

to also make this work in your dropdowns, you should probably be save renaming the variable that holds your second level entry models in the for tag:

{% for page in subPages %}
    ...
{% endfor %}
1
  • Thanks Carl! I ended up replacing the whole thing with a&m Nav, as that was way simpler to do.
    – Filadelfia
    May 22 '15 at 7:42

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.