Bootstrap Navigation with Dropdown

Hi Trevor,

I was working through this a few months ago, this is my forum string with Drew, it might help:

https://forum.grabaperch.com/forum/08-04-2015-responsive-dropdown-navigation

Thank you for the suggestion. I am still having issues, though.

Hi Trevor,

For Bootstrap nav I split the templates into two. I think this should work for you:

In your page the Perch Navigation function would be:

<div id="navbar" class="navbar-collapse collapse">
  <?php 
    perch_pages_navigation(array(
      'template' => array('level1.html', 'level2.html'),
    ));
  ?>
</div>

Then have this template in perch/templates/navigation/level1.html

<perch:before>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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="navbar-brand" href="#">Menu</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    </perch:before>            
                        <li class="<perch:if exists="current_page">active </perch:if><perch:if exists="ancestor_page">ancestor </perch:if><perch:if exists="subitems">dropdown </perch:if>">
                            <a href="<perch:pages id="pagePath" />"  <perch:if exists="subitems"> class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"</perch:if>><perch:pages id="pageNavText" /></a>   
                            <perch:pages id="subitems" encode="false" />
                        </li>
                    <perch:after>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
        <!--/.container-fluid -->
    </nav>
</perch:after>

and this in perch/templates/navigation/level2.html

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

Hi there,

Thank you for your reply, Simon. I tried what you suggested, but no drop down is showing when I hover the links:

https://pacasatesting.site/about-pa-casa/

The links listed under "Additional Information" should show under "About" as they are subpages.

What's being output:

<div id="navbar" class="navbar-collapse collapse">

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="navbar-brand" href="#">Menu</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                    <li class=""><a href="/"  >Home</a></li>
                    <li class="active "><a href="/about-pa-casa/"  >About</a></li>
                    <li class=""><a href="/local-programs/"  >Local Programs</a></li>
                    <li class=""><a href="/get-involved/"  >Get Involved</a></li>
                    <li class=""><a href="/news.php"  >News</a></li>
                    <li class=""><a href="/events.php"  >Events</a></li>
                    <li class=""><a href="/frequently-asked-questions.php"  >FAQs</a></li>
                    <li class=""><a href="/contact-pa-casa.php"  >Contact</a></li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
</nav>

I'm pretty sure I need this to output when there are subpages:

<li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>