Forum

Thread tagged as: Question, Problem, Configuration

Navigation Subitem

Hi I'm having trouble with my site navigation....

I have my nav set up as the following perch tags...


<perch:before>
   <ul
   <perch:if id="pageDepth" match="eq" value="1">class="right"</perch:if>
   <perch:if id="pageDepth" match="eq" value="2">class="dropdown"</perch:if> >
</perch:before>

        <li
            <perch:if exists="current_page"> class="active selected"</perch:if>
            <perch:if exists="ancestor_page"> class="ancestor"</perch:if>
                <perch:if exists="subitems"> class="has-dropdown"</perch:if>
            <perch:if exists="ancestor_page"> class="ancestor"</perch:if> >

            <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" />
            </a><perch:pages id="subitems" encode="false" />
        </li>

<perch:after>
    </ul>
</perch:after>

All works fine on the homepage, list items with a sub list all call in the correct class names,

However, when I navigate to a lower level ( mysite.com/lowerlevel/ ) I loose the .has-dropdown class from the top level menu item. meaning a user can't display the subnav on hover.

I cant understand why it loses it, is it something to do with the way subitems are generated?

GENERATED HOMEPAGE HTML


<ul class="right">
  <li class="active selected"> <a href="/">Home</a> </li>

  <li class="has-dropdown not-click"> <a href="/subpages/"> I'm a dropdown </a>

    <ul class="dropdown">
      <li class="title back js-generated">
        <h5><a href="javascript:void(0)">Back</a></h5>
      </li>

      <li class="parent-link show-for-small-only"><a class="parent-link js-generated" href="/subpages/">I'm a dropdown parent on mobile view </a></li>

      <li> <a href="/subpages/Subitem">Sub Item 1</a></li>
      <li> <a href="/subpages/Subitem2">Sub Item 2</a> </li>
    </ul>
  </li>

</ul>

GENERATED SUBPAGE HTML



<ul class="right">
  <li> <a href="/">Homepage </a> </li>

  <li class="active selected"> <a href="/subpages/"> I'm a dropdown </a>  <!-- I need the class " has-dropdown not-click" to also show here > -->

    <ul class="dropdown">
      <li> <a href="/subpages/Subitem">Sub Item 1</a> </li>
      <li> <a href="/subpages/Subitem2">Sub Item 2</a> </li>
    </ul>

  </li>

</ul>

I seem to be going round in circles at the moment any ideas where I have gone wrong would be appreciated.

Thanks
Jon Pudny

Jon Pudny 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

What immediately stands out is that you're applying multiple class attributes:

<li
            <perch:if exists="current_page"> class="active selected"</perch:if>
            <perch:if exists="ancestor_page"> class="ancestor"</perch:if>
                <perch:if exists="subitems"> class="has-dropdown"</perch:if>
            <perch:if exists="ancestor_page"> class="ancestor"</perch:if> >

I would replace that with:

<li class="<perch:if exists="current_page"> active selected</perch:if>
            <perch:if exists="ancestor_page"> ancestor</perch:if>
                <perch:if exists="subitems"> has-dropdown</perch:if>" >
Jon Pudny

Jon Pudny 0 points

6 years ago

Ah... D'oh.

Thanks Drew - That seems to of done the trick.

Caused my own problems by breaking it down so I could understand what was going on!