Navigation

Ok I have in my index.php:

<?php 
            perch_pages_navigation(array(
                'from-path'            => '/',
                'template'             => 'item.html'      
            ));
          ?>

In item.html

<perch:before>
    <ul class="nav navbar-nav">
</perch:before>
        <li class="active"><a href="https://www.rdbroley.me.uk/">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services</a>
              <ul class="dropdown-menu">
                <li><a href="responsive-web-design.html">Responsive Web Design</a></li>
                <li><a href="ui-ux-design.html">UI/UX Design</a></li>
                <li><a href="web-design-development.html">Web Development</a></li>
              </ul>
            </li>
            <li><a href="my-work.html">Work</a></li>
            <li><a href="mailto:mr.rdbroley@gmail.com">Contact</a></li>
<perch:after>
    </ul>
</perch:after>

But its duplicating my navigation?

Thanks Drew

By default do you mean this code?

<perch:before> <ul> </perch:before> <li<perch:if exists="current_page"> class="selected"</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>

Drew McLellan said:

Yes, that's right.

Thanks Drew,

Would you be able to give me an example of how to structure my navigation, and a dropdown please.

Managed to get something to work using

index.php

<?php perch_pages_navigation(array(
    'template'  => 'item.html',    
    'from-path' => '/services',
)); ?>

In item.html

<perch:before>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="logo logo-small" href="https://www.rdbroley.me.uk/" title="Rob Broley" rel="home"></a>
        </div>
        <div class="collapse navbar-collapse">
           <ul class="nav navbar-nav">
             <li class="active"><a href="https://www.robertbroley.co.uk/">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services</a>
              <ul class="dropdown-menu">
                <li<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>
           </li>
            <li><a href="my-work.html">Work</a></li>
            <li><a href="mailto:mr.rdbroley@gmail.com">Contact</a></li>
</perch:before>
<perch:after>
</div><!--/.nav-collapse -->
      </div>
    </div>
</perch:after>

It works but I am not too sure if its correct. But how do I tell perch to structure my navigation the same as the page structure shown in Perch#s backend where you organised the pages?

Thanks

Rob

Drew McLellan said:

Again, you're hard coding your links into the template. The template shouldn't contain any of your links - just the markup to produce them.

Its displaying the top navigation only. Can you tell me please what code would be required to get the dropdown menu to work.

Code so far:

<!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="logo logo-small" href="https://www.rdbroley.me.uk/" title="Rob Broley" rel="home"></a>
        </div>
        <div class="collapse navbar-collapse">
            <?php perch_pages_navigation(array(
    'levels'    => 1,
)); ?>
        </div><!--/.nav-collapse -->
      </div>
    </div>

And then I have the default code

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

<li<perch:if exists="current_page"> class="selected"</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>

I added level 2 but it messes the navigation up as the structure is not out putted correctly.

Would I need to put any other tags in the index.php as I've tried /services for the path too and nothing happens. Only other option would be to alter the item.html but I'm not too sure what the codes doing to alter it.

Or would you recommend a second nav template ?

Now the static code for the dropdown in bootstrap is

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services</a>
              <ul class="dropdown-menu">
                <li><a href="responsive-web-design.html">Responsive Web Design</a></li>
                <li><a href="ui-ux-design.html">UI/UX Design</a></li>
                <li><a href="web-design-development.html">Web Development</a></li>
              </ul>

So I have the dropdown working using

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

<li<perch:if exists="current_page"> class="selected"</perch:if><perch:if exists="ancestor_page"> class="ancestor"</perch:if>> <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>

<perch:before> <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services</a>
              <ul class="dropdown-menu"> </perch:before>

              <li<perch:if exists="current_page"> class="selected"</perch:if><perch:if exists="ancestor_page"> class="ancestor"</perch:if>> <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a></li>


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

But it has put all my page into the dropdown. As the Blog page is a top level page.