Forum

Thread tagged as: Question, Problem

Submenu highlight

I'm using Zordmenu and it is working fine. But when I try to add a class for secondary active menu item, the class is not added.

Level 1

<perch:before>
<div id="menuzord" class="menuzord mz-orange menuzord-responsive">
<a href="#" class="menuzord-brand">Brand</a>
<ul class="menuzord-menu">
    </perch:before>
<li<perch:if exists="current_page"> class="active"</perch:if><perch:if exists="ancestor_page"> class="ancestor"</perch:if>> <a href="<perch:pages id="pagePath" />" <perch:if exists="subitems"></perch:if>><perch:pages id="pageNavText" /></a> <perch:pages id="subitems" encode="false" /> </li><perch:after>
  </ul> <!-- primary-nav -->
</div>
</perch:after>

Level 2

<perch:before>
<div class="megamenu">
   <div class="megamenu-row">
      <div class="s12">
<ul>
  </perch:before>
  <li <perch:if exists="ancestor_page">class="active2" </perch:if>>
    <a href="<perch:pages id="pagePath" />" <perch:if exists="subitems"></perch:if>><perch:pages id="pageNavText" /></a> <perch:pages id="subitems" encode="false" />  </li>
<perch:after>
</ul>
</div></div></div>
</perch:after>
Edward Johansen

Edward Johansen 0 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago

You need to check for current_page I think. An ancestor is a parent or greater - so will apply to level 1 when level 2 is active.
Edward Johansen

Edward Johansen 0 points

3 years ago

I'm not sure what you mean...
Edward Johansen

Edward Johansen 0 points

3 years ago

Got it.

On level 2

<perch:before>
<div class="megamenu">
   <div class="megamenu-row">
      <div class="s12">
<ul>
  </perch:before>
  <li <perch:if exists="ancestor_page">class="active2" </perch:if><perch:if exists="current_page">class="active2"</perch:if>>
    <a href="<perch:pages id="pagePath" />" <perch:if exists="subitems"></perch:if>><perch:pages id="pageNavText" /></a></li>
<perch:after>
</ul>
</div></div></div>
</perch:after>

Changed it to

<perch:before>
<div class="megamenu">
   <div class="megamenu-row">
      <div class="s12">
<ul>
  </perch:before>
  <li <perch:if exists="current_page">class="active2"</perch:if>>
    <a href="<perch:pages id="pagePath" />" <perch:if exists="subitems"></perch:if>><perch:pages id="pageNavText" /></a></li>
<perch:after>
</ul>
</div></div></div>
</perch:after>