Twitter Bootstrap Nav with fuel_nav how to?

edited December 2013 in News & Announcements
I am using boostrap framework to create my site and got stucked with the navigation as the desire class cannot be applied to the navigation. eg for dropdown there should be 'dropdown' class should be added to the parent and then 'dropdown-toggle' to the anchor and then 'dropdown-menu' to the next UL element. FYI - I am using bootstrap 2.

Any way to create bootstrap comptabile navigation structure with fuel_nav and if Yes how can we achieve this?

eg nav html:
<ul class="nav"> <li class="active first"><a href="#">Parent #1</a></li> <li><a href="#">Parent #2</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parent #3 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Child #3.1</a></li> <li><a href="">Child #3.2</a></li> <li><a href="">Child #3.3</a></li> <li><a href="">Child #3.4</a></li> <li><a href="">Child #3.6</a></li> </ul> </li> </ul>
«1

Comments

  • edited 8:52AM
    The "container_tag_class" only applies to the main ul tag so in order to get the nested dropdown-menu styling, you'll need to replicate the dropdown-menu class to target the nested "ul" by doing ul ul.
  • edited 8:52AM
    i am sorry i dont get you. any example code would be great. thank you so much for your quick response.
  • edited 8:52AM
    I'm assuming there is a CSS rule for the ".dropdown-menu" class in the bootstrap CSS. If so, that same styling would need to be applied to a new rule like so:
    .dropdown-menu, .nav ul { put the .dropdown-menu CSS code here }
    Does that make sense?
  • edited December 2013
    Hi There,

    I modified your Menu.php class which actually generates the Bootstrap v2 compatible navigation on the fly. Here is the modified version of code. Hope this helps if someone is looking for the same solution:

    https://gist.github.com/anunay/8180600

    Thank you
    Anunay
  • Hi @anunay,

    Does this menu.php work with bootstrap 3? I tried to add your menu class but did not have any success.

    Thanks,
  • edited 8:52AM
    There is now a "subcontainer_tag_class" property you can use to add to nested "ul" elements. It is an array value in which you'd specify the depth as they key (1, 2..etc) and the value as the class name you want to use.
  • Hi @admin, Thanks for your comment but I am not quite clear what you mean.

    Could you give me an example of how I would apply this?

    Thanks,
  • edited September 2014
    Sure:
    <?php echo fuel_nav(array('subcontainer_tag_class' => array(0 => 'dropdown-menu')));?>
  • edited September 2014
    @admin, thanks but it seems to throw an error;
    Parse error: syntax error, unexpected ';' in /Applications/MAMP/htdocs/wycf/fuel/application/views/_blocks/header.php
  • edited 8:52AM
    I missed a closing parenthesis. Add one to the end (I modified the code above to have it).
  • @admin, so just to check I am on the right track - this placed in header.php will style my menu with '.dropdown-menu' bootstrap attributes?
  • edited 8:52AM
    The above code should add the "dropdown-menu" class to the first set of "ul" tags in the dropdown.
  • So would:

    <?php echo fuel_nav(array('subcontainer_tag_class' => array(1 => 'navbar')));?>

    add "navbar" class to second set of "ui" tags?
  • edited 8:52AM
    Yes. The array key (e.g. 1), is the depth at which to apply the class.
  • @admin - I can't seem to see a change.
    <?php echo fuel_nav(array('subcontainer_tag_class' => array(0 => 'navbar')));?> Does not have any affect on my navigation.
  • edited October 2014
    What version of FUEL are you running (e.g. it is currently 1.2 and you can tell by looking at the fuel/modules/fuel/config/fuel_constants.php file)?
  • Yes I am using 1.2
  • edited 8:52AM
    What if you use a "1" instead of a "0" for the navbar key?
  • Hi @admin, unfortunately no luck.
  • edited October 2014
    I am using the latest bootstrap css and my header code is as follows:

    <nav class="nav nav-pills nav-justified" role="navigation"> <?php echo fuel_nav(array('subcontainer_tag_class' => array(1 => 'nav navbar-nav')));?> </nav>

    Which file was changed to add the subcontainer_tag_class ? Perhaps I check that particular file is the latest version.
  • edited 8:52AM
    Are you using the fuel/application/views/_variables/nav.php file and if so, what does it look like?

    The fuel/modules/fuel/libraries/Menu.php class and the fuel/modules/fuel/libraries/Fuel_navigation.php class are the ones that changed but if you updated to 1.2, you should be OK.
  • <?php $nav['work'] = 'What We Wo'; $nav['people'] = 'Get Involved'; $nav['donate'] = 'Donate'; //People Sublcass $nav['people/volunteer'] = array('label' => 'Volunteer', 'parent_id' => 'people'); $nav['people/advisors'] = array('label' => 'Advisors', 'parent_id' => 'people');
  • edited October 2014
    <body> <nav class="nav nav-pills nav-justified" role="navigation"> <?php echo fuel_nav(array('container_tag_class' => array(0 => 'navbar')));?> <?php echo fuel_nav(array('subcontainer_tag_class' => array(1 => 'dropdown-menu')));?> </nav>
  • edited 8:52AM
    @archienorman11 : you can't use this https://gist.github.com/anunay/8180600, all you need is to modify this class based on the new structure that Bootstrap 3 navigation has.
  • edited October 2014
    Ok I can now see bootstrap classes being applied to some menu classes: ( This is what I am seeing when I 'show page source'

    <nav class="nav nav-pills nav-justified" role="navigation"> <ul> <li class="first"><a href="http://wycf:8888/work">What We Wo</a></li> <li><a href="http://wycf:8888/people">Get Involved</a> <ul class="nav navbar-nav"> <li class="first"><a href="http://wycf:8888/people/volunteer">Volunteer</a></li> <li class="last"><a href="http://wycf:8888/people/advisors">Advisors</a></li> </ul> </li> <li class="last"><a href="http://wycf:8888/donate">Donate</a></li> </ul> </nav>
  • @anunay - you mean modify menu.php?
  • edited October 2014
    yeah, modify as per your need, as you have full control over the code so you can adjust as needed.
  • edited 8:52AM
    well i am not sure but better to extend the menu class and modify/override the method where needed and call that. you can ask admin though on how to override the menu.php class so it won't get reverted if you plan to update your system in future with latest version.
  • edited 8:52AM
    Perhaps it might help if you pasted in what you want the HTML to look like with the proper classes.
  • <nav> <ul class="nav nav-tabs" role="tablist"> <li class="first active"><a href="http://wycf:8888/work">What We Wo</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="http://wycf:8888/people">Get Involved</a> <ul class="dropdown-menu" role="menu"> <li class="first"><a href="http://wycf:8888/people/volunteer">Volunteer</a></li> <li class="last"><a href="http://wycf:8888/people/advisors">Advisors</a></li> </ul> <li class="last"><a href="http://wycf:8888/donate">Donate</a></li> </ul> </nav>
Sign In or Register to comment.