Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-05-22T07:42:17.523Z
Answers.Text: Thanks Carl! I ended up replacing the whole thing with a&m Nav, as that was way simpler to do.
Answers.UserDisplayName: Filadelfia
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-05-22T07:04:01.350Z
Answers.LastActivityDate: 2015-05-22T07:04:01.350Z
Answers.UserDisplayName: carlcs
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-05-22T07:16:20.317Z
Comments.Text: http://dev.filadelfiavennesla.no looks good now! :D
Comments.UserDisplayName: carlcs
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-05-22T07:50:53.793Z
Comments.Text: Yeah, but only after going with a 3rd party plugin. Native way was way over my head unfortunately. :P
Comments.UserDisplayName: Filadelfia
Tags: <navigation>
Title: Need help fixing my navigations code
ThreadText: # 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:
  
  ```
  <!-- 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.
  
  **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 `<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 %}
  
  ```
  
  > **Comments:**
  > **username_0**: Thanks Carl! I ended up replacing the whole thing with a&m Nav, as that was way simpler to do.  
  
  ---
  
  