Forum

Thread tagged as: Question, Problem

Page Navigation

Can someone see what I am doing wrong;

Navigation template -> item.html

<perch:before>
    <ul class="nav sf-menu clearfix">
</perch:before>
        <li<perch:if exists="current_page"> class="active"</perch:if><perch:if exists="ancestor_page"> class="sub-menu sub-menu-1"</perch:if>>
            <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" />
            <perch:if exists="ancestor_page">
                    <i class="fa fa-angle-down" aria-hidden="true"></i>
            </perch:if>
            </a>   
            <perch:if exists="ancestor_page">
                    <perch:before>
                        <ul>
                    </perch:before>
                        <perch:pages id="subitems" encode="false" />
                    <perch:after>
                        </ul>
                    </perch:after> 
            <perch:else>
                 </li>
            </perch:if>
<perch:after>
    </ul>
</perch:after>

The HTML should look like this;

<ul class="nav sf-menu clearfix">
    <li>
        <a href="index.html">home</a>
    </li>
    <li>
        <a href="index-1.html">about</a>
    </li>
    <li>
        <a href="index-2.html">hot tours</a>
    </li>
    <li class="active">
        <a href="index-3.html">destinations</a>
    </li>
    <li class="sub-menu sub-menu-1">
        <a href="#">Pages
            <i class="fa fa-angle-down" aria-hidden="true"></i>
        </a>
        <ul>
            <li>
                <a href="index-4.html">Gallery</a>
            </li>
            <li>
                <a href="index-5.html">Services</a>
            </li>
            <li>
                <a href="404.html">404 page not found</a>
            </li>
        </ul>
    </li>

    <li class="sub-menu sub-menu-1">
        <a href="#">Blog
            <i class="fa fa-angle-down" aria-hidden="true"></i>
        </a>
        <ul>
            <li>
                <a href="blog.html">Blog</a>
            </li>
            <li>
                <a href="blog-post.html">Blog Poast</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="index-6.html">contacts</a>
    </li>
</ul>

it actually look like this;

<ul class="nav sf-menu clearfix">
    <li class="sub-menu sub-menu-1">
        <a href="#">About
            <i class="fa fa-angle-down" aria-hidden="true"></i>
        </a>   
        <ul>
        </li>
        <li class="sub-menu sub-menu-1">
            <a href="#">Gallery
                <i class="fa fa-angle-down" aria-hidden="true"></i>
             </a>   
        </li>
        <li class="active">
            <a href="#">Home    
            </a>   
        <li class="sub-menu sub-menu-1">
            <a href="#">Divers Tales
                <i class="fa fa-angle-down" aria-hidden="true"></i>        
            </a>   
        </li>
        <li class="sub-menu sub-menu-1">
            <a href="#">Members Area
                <i class="fa fa-angle-down" aria-hidden="true"></i>        
            </a>   
        </li>
        <li class="sub-menu sub-menu-1">
            <a href="#">Diving
                <i class="fa fa-angle-down" aria-hidden="true"></i>        
            </a>   
        </ul>
    </li>
</ul>

I swear I have gone this before but I cannot find the code and now I am going brain dead.

Dennis

Dennis Pickworth 0 points

3 years ago

Simon Clay 127 points

3 years ago

I think on line 11 of your template you want subitems instead of ancestor_page.

I usually do this with two templates, so I'd be interested if it works.

Dennis Pickworth 0 points

3 years ago

Simon, That did not work. All the items just appear at the top. How have you done this with templates

Dennis Pickworth 0 points

3 years ago

I have found out about the template and I have changed them to look like this.

navigation.php

   <?php perch_pages_navigation(array(
             'navgroup' =>'Main',
             'levels' => 2,
             'template' => array('level1.html', 'level2.html'),
    )); ?>

Level1.html

<perch:before>
    <ul class="nav sf-menu clearfix">
</perch:before>

    <li<perch:if exists="ancestor_page"> class="sub-menu sub-menu-1"</perch:if>>
        <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" />
        <perch:if exists="ancestor_page">
            <i class="fa fa-angle-down" aria-hidden="true"></i>
        </perch:if>
    </a>
    </li>
<perch:after>
    </ul>
</perch:after>

level2.html

<ul>
    <perch:pages id="subitems" encode="false" />
</ul>

But it is treating each item as a sub item.

If I change level1.html line 5 too this. It makes no difference.

<li<perch:if exists="subitems"> class="sub-menu sub-menu-1"</perch:if>>

Lexi McGee 3 points

3 years ago

We use two html templates for our drop down for product categories. We also use categories instead of perch_pages_navigation

Check this link https://forum.grabaperch.com/forum/07-13-2018-looping-through-all-categories-displaying-all-items-within-each-category

Simon Clay 127 points

3 years ago

This is the method I use (for Bootstrap).

For Nav

<?php 
                        perch_pages_navigation(array(
                            'template' => array('level1.html', 'level2.html'),
                            'levels' => 2,
                        ));
                    ?>

My nav templates are:

level1.html:

<perch:before>
<ul class="nav navbar-nav">
</perch:before>

    <li class="<perch:if exists="subitems">dropdown </perch:if><perch:if exists="current_page">active </perch:if><perch:if exists="ancestor_page"> current-menu-ancestor</perch:if>">
        <perch:if exists="subitems"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><perch:pages id="pageNavText" /></a>
        <perch:pages id="subitems" encode="false" />
    </li>
    <perch:else /><a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a></li></perch:if>

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

level2.html:

<perch:before>
    <ul class="dropdown-menu">
</perch:before>
        <li class="<perch:if exists="current_page">active </perch:if>"><a href="<perch:pages id="pagePath" />" title="<perch:pages id="pageNavText" />"><perch:pages id="pageNavText" /></a></li>
<perch:after>
    </ul>
</perch:after>

Dennis Pickworth 0 points

3 years ago

Hi All,

Thanks for the help. I manged to made it work with a combination of Simons work and my own pig headedness to get this running.

Thanks again for all you help

Dennis