Implementing Bootstrap Navigation navbar into concrete5

Permalink 2 users found helpful
Note: solution given below in responses..

Hopefully this is a easy question for you PHP Guru's. I need to print this using php in the autonav block:

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">(NAME FROM SITE MAP)<b class="caret">url . '"</a>


This is a verry sad attempt on my part
echo '<li class="dropdown">'; echo '<a href="#' . $ni->url . '" class="dropdown-toggle" data-toggle="dropdown">' . $ni->name . '<b class="caret"></a>'';


This is part of my attempt to integrate the bootstrap navbar into the autonav block.

Thanks in advance.

jlines41
 
drbiskit replied on at Permalink Reply
drbiskit
Hi - Can you just double check and confirm exactly what you need the html output as please? Looking at your examples above, the url is in different places - it looks like it's not in the correct place.

But, you can try this:

echo '<li class="dropdown">'; echo '<a href="' . $ni->url . '" class="dropdown-toggle" data-toggle="dropdown">' . $ni->name . '<b class="caret"></a>';


*NB - You have got an unclosed <b> tag which will need looking at - but also, the <b> element is best not used these days in favour of either <em> if it is for 'emphasis', or just using a font-weight (usually of '700') in your css file for this element style.
jlines41 replied on at Permalink Best Answer Reply
jlines41
Thanks for your reply drbiskit. Your code, help from the forums and some additional research through google helped solve my problem.

Basically I am working on implementing twitter bootstrap in Concret5 my own way. My solution that is up and working:

Place this in your header.php file (or wherever else you are placing your nav: NOTE: Be sure to type the name of the custom autonav template you will be creating later here $nav->render('templates/YOUR TEMPLATE NAME');

<!-- 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 href="#">YOUR BRAND</a>
</div>
<div class="navbar-collapse collapse">
<?php
$nav = BlockType::getByHandle('autonav');


Create a custom autonav block (root/blocks/autonav/templates/TEMPLATENAME.php

I used "Jordan Lev's Clean autonav Template". You are going to want to un-comment this code and be sure to name the class "dropdown"

if ($ni->hasSubmenu) {
                //class for items that have dropdown sub-menus
                $classes[] = 'dropdown';
        }


Then at the bottom, replace all of the code under * DESIGNERS: CUSTOMIZE THE HTML STARTING HERE...
*/ with this code:

echo '<ul class="nav navbar-nav navbar-right">'; //opens the top-level menu
foreach ($navItems as $ni) {
        echo '<li class="' . $ni->classes . '">'; //opens a nav item
        if ($ni->isEnabled) {
                $ni->hasSubmenu;
        } else {
                echo '<span class="' . $ni->classes . '">' . $ni->name . '</span>';
        }
        if ($ni->hasSubmenu) {
                echo '<a href="#" class="dropdown-toggle" data-toggle="dropdown">' . $ni->name . '<b class="caret"></b></a>';
        } else {
                echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</a>';
        }
        if ($ni->hasSubmenu) {
                echo '<ul class="dropdown-menu">'; //opens a dropdown sub-menu


And as long as you have all of the other bootstrap component implemented in to C5 properly, that should work.
jlines41 replied on at Permalink Reply
jlines41
Any cleaning up of my php would be appreciated, but like I said it is working.
zoinks replied on at Permalink Reply
btw, thank you very much. My code below is not an improvement on yours by any means, I was just trying to be more explicit for dummies like myself who might have a bit of trouble (like I did).
zoinks replied on at Permalink Reply
Interesting... it didn't quite work for me at first because I was adding the '.php' in the $nav->render template section like this:
$nav->render('templates/bootstrapnavbar.php');


Since the code above was a little ambiguous...
$nav->render('templates/YOUR TEMPLATE NAME');


It took me a while to realize all I had to do was remove the .php suffix.

So, my final code in the template looks like this:
<div class="collapse navbar-collapse navbar-ex2-collapse">
   <?php 
   //Concrete5 autonav replaces hardcoded nav
      $nav = BlockType::getByHandle('autonav');
      $nav->controller->orderBy = 'display_asc';
      $nav->controller->displayPages = 'top';
      $nav->controller->displaySubPages = 'all';
      $nav->controller->displaySubPageLevels = 'custom';
      $nav->controller->displaySubPageLevelsNum = 2;
      $nav->render('templates/bootstrapnavbar');
   ?>
</div>


Before I figured that out, I just stuck a GlobalArea Navigation block in the template like this instead:
<div class="collapse navbar-collapse">
   <?php 
      $a = new GlobalArea('Navigation');
      $a->display();
   ?> 
</div>


...And then added the autonav through C5 Edit Mode rather than hard-coding it in the template. I then just applied the Custom Template of "bootstrapnavbar" and it worked perfectly.

So now two variations are documented, I guess.


...
...
But, since I finally figured out the hard-coded template problem and my version ended up looking a little different from yours, I wanted to add my full code below..

The header template hard-coded navbar code:
<nav class="navbar navbar-default" role="navigation" aria-label="Primary">
           <!-- Brand and toggle get grouped for better mobile display -->
           <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
             </button>
             <!-- show 'MENU' when navbar collapses; acts as a second toggle button -->
              <a class="navbar-brand hidden-desktop" data-toggle="collapse" data-target=".navbar-ex2-collapse" href="#">MENU</a>
           </div>
           <!-- Collect the nav links, forms, and other content for toggling -->
           <div class="collapse navbar-collapse navbar-ex2-collapse">
              <?php


...
And the Jordan Lev auto nav customized template code (which goes in root/blocks rather than concrete/blocks). If there is no 'autonav' folder, create one and then put a 'templates' folder in that autonav folder and then put this code in there named 'bootstrapnavbar.php' if you want it to work with the above template code. :)

<?php
//NOTE: For extra functionality, you can add the following page attributes (via Dashboard -> Pages and Themes -> Attributes):
//
// 1) Handle: replace_link_with_first_in_nav
//    Type: Checkbox
//    Functionality: If a page has this checked, clicking on it in the nav menu will go to its first child (sub-page) instead.
//
// 2) Handle: exclude_subpages_from_nav
//    Type: Checkbox
//    Functionality: If a page has this checked, all of that pages children (sub-pages) will be excluded from the nav menu (but the page itself will be included).
//
// 3) Handle: disable_link_in_nav
//    Type: Checkbox
//    Functionality: If a page has this checked, it will appear in the nav menu but will not be "clickable" (will not link to any page).
//



One last thing... after I got this all to work, I realized that the nav-selected and nav-path-selected classes weren't working at all. I tried to put these classes into my CSS and copy the styles I already had an 'active' class that were working with the bootstrap navbar, but couldn't get it to work and decided it would be easier to just change the classes in the custom C5 autonav template. So I went into root/blocks/autonav/templates/bootstrapnavbar.php and simply replaced 'nav-selected' and 'nav-path-selected' with 'active' and now it works 100%.