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

<pre><code>{% set active = entry.id == page.id ? 'class="active"' %}
</code></pre>

<p>and then add that to your list items:</p>

<pre><code>&lt;li {{ active }}&gt;
</code></pre>

<p>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:</p>

<pre><code>{% for page in subPages %}
    ...
{% endfor %}
</code></pre>

CC BY-SA 3.0
2015-05-22T07:42:17.523Z
Thanks Carl! I ended up replacing the whole thing with a&m Nav, as that was way simpler to do.
Filadelfia
CC BY-SA 3.0
2015-05-22T07:04:01.350Z
2015-05-22T07:04:01.350Z
carlcs
<p>I'm having a hard time getting our navigation to output properly.
Anyone mind helping me fix whatever I've done wrong here?</p>

<p>Here's how the original, untouched code look like:</p>

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

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

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

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

                    &lt;section class="top-bar-section"&gt;
                        &lt;!-- Right Nav Section --&gt;
                        &lt;ul class="right"&gt;

                            {# 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 #}
                            &lt;li class="active"&gt;
                                &lt;a href="{{ page.getUrl }}"&gt;{{ page.title }}&lt;/a&gt;
                            &lt;/li&gt;

                            {% else %}

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

                                    {# 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 #}
                                        &lt;li&gt;&lt;a href="{{ subPage.getUrl }}"&gt;{{ subPage.title }}&lt;/a&gt;&lt;/li&gt;

                                    {% endfor %}

                                    &lt;/ul&gt;
                            &lt;/li&gt;
                            {% endif %}
                        &lt;/ul&gt;
                    {% endfor %}

                &lt;/nav&gt;
            &lt;/div&gt;
&lt;!-- /Main Navigation --&gt;
</code></pre>

<p><strong>EDIT:</strong></p>

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


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

<p>I ended up solving it this way instead.</p>

CC BY-SA 3.0
2015-05-22T07:16:20.317Z
http://dev.filadelfiavennesla.no looks good now! :D
carlcs
CC BY-SA 3.0
2015-05-22T07:50:53.793Z
Yeah, but only after going with a 3rd party plugin. Native way was way over my head unfortunately. :P
Filadelfia
<navigation>
Need help fixing my navigations code
# Need help fixing my navigations code

(Asked by: username_0 on 2015-05-21)

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:

            
                
                    
                        
                             {{ siteUrl }}
                        
                        
                            Menu
                        
                    

                    
                        
                        
                            Right Button Active
                            Right Button Dropdown
                                    
                                        First link in dropdown
                                            Right Button sub-Dropdown
                                                
                                                    First link in sub-dropdown
                                                    Second (Active) link in sub dropdown
                                                
                                            
                                        
                                        Second (Active) link in dropdown
                                    
                            
                        
                
            


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

                    
                        
                        

                            {# 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 #}
                            
                                {{ page.title }}
                            

                            {% else %}

                            {# List navigation item if entry DOES have child entries #}
                            {{ page.title }}
                                    

                                    {# 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 #}
                                        {{ subPage.title }}

                                    {% endfor %}

                                    
                            
                            {% endif %}
                        
                    {% endfor %}

                
            


EDIT:

            
                
                    
                        
                            
                                {% set image = entry.logo.first() %}
                                {% if image %}
                                
                                {{ endif }}
                            
                        
                        
                            Meny
                        
                    


                    
                    
                        {{ 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.

**Tags:** navigation
> **Comments:**
> **username_1**: http://dev.filadelfiavennesla.no looks good now! :D  
> **username_0**: Yeah, but only after going with a 3rd party plugin. Native way was way over my head unfortunately. :P  

---

## 1 answers

### Answer by username_1 on 2015-05-22. Score: 1

You forgot to close the  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:


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 %}

> **Comments:**
> **username_0**: Thanks Carl! I ended up replacing the whole thing with a&m Nav, as that was way simpler to do.  

---

