We are transitioning over to a new forum platform. Please post new issues there. Existing threads will be dealt with here unless you choose to move them over. Visit the new forum

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

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

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>" >

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!