Problem with Navigator Bootstrap 3 Menu Template

[brentnl]

Hi!

I'm very familiar with CMSMS 1x, but fairly new to v2. I'm trying to get the 'bootstrap starter template' to work, especially the navigation.

Found a menu template on this forum, compatible with Bootstrap 3 (I'm using 3.3.6). My menu template looks like this;

Code: Select all

{* Main Menu *}
{if !isset($depth)}{$depth=0}{/if}
{strip}

{if $depth == 0}
<ul class="nav navbar-nav navbar-right">
{else}
<ul class="dropdown-menu">
{/if}

{$depth=$depth+1}
{foreach $nodes as $node}
  {* setup classes for the anchor and list item *}
  {$liclass=[]}
  {$aclass=[]}

  {* the first child gets a special class *}
  {if $node@first && $node@total > 1}{$liclass[]='first_child'}{/if}

  {* the last child gets a special class *}
  {if $node@last && $node@total > 1}{$liclass[]='last_child'}{/if}

  {if $node->current}
    {* this is the current page *}
    {$liclass[]='menuactive'}
    {$aclass[]='menuactive'}
  {/if}
  {if $node->has_children}
    {* this is a parent page *}
    {$liclass[]='dropdown'}
    {$aclass[]='dropdown-toggle'}
  {/if}
  {if $node->parent}
    {* this is a parent of the current page *}
    {$liclass[]='menuactive'}
    {$aclass[]='menuactive'}
  {/if}

  {* build the menu item from the node *}
  {if $node->type == 'sectionheader'}
    <li class='{implode(' ',$liclass)}'><a{if count($aclass) > 0} class="{implode(' ',$aclass)}"{/if} data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{$node->menutext}<span class="caret"></span></a>
      {if isset($node->children)}
        {include file=$smarty.template nodes=$node->children}
      {/if}
    </li>
  {else if $node->type == 'separator'}
    <li style="list-style-type: none;"><hr class="menu_separator"/></li>
  {else}
    {* regular item *}
    <li class="{implode(' ',$liclass)}">
      <a{if count($aclass) > 0} class="{implode(' ',$aclass)}"{/if} href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>
      {if isset($node->children)}
        {include file=$smarty.template nodes=$node->children}
      {/if}
    </li>
  {/if}
{/foreach}
{$depth=$depth-1}
</ul>

{if $depth == 0}
<div class="clearb"></div>
</div>{* menuwrapper *}
{/if}
{/strip}

And I'm calling the menu with {Navigator}. The menu does show up, but doesn't look the way it should. When I compare the source code of the 'starter template' with my own, I noticed that the <nav> part of the navigation is missing in my code from above. Also the mobile-navigation doesn't show up when resizing.

I guess it has to do with this missing code, but don't know for sure how to add it al up to one working menu template.

Code: Select all

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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="index.html">Start Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right"> ......

What do I have to add to the code to get it working?

[howey]

Hi

I haven't read through your post in detail, but I got a template working to generate a basic navbar as below. I still need to tweak it to get the active classes.

Code: Select all

{* simple navigation *}
{* note, function can only be defined once *}
{* 
  variables:
  node: contains the current node.
  aclass: is used to build a string containing class names given to the a tag if one is used
  liclass: is used to build a string containing class names given to the li tag.
*}


{function name=Nav_menu depth=1}{strip}
{if $depth ==0}
    <ul class="nav navbar-nav">
    {else}
    <ul class="dropdown-menu" role="menu">
{/if}
  {foreach $data as $node}
    {* setup classes for the anchor and list item *}
    {assign var='liclass' value='menudepth'|cat:$depth}
    {assign var='aclass' value=''}

    {* the first child gets a special class *}
    {if $node@first && $node@total > 1}{assign var='liclass' value=$liclass|cat:' first_child'}{/if}

    {* the last child gets a special class *}
    {if $node@last && $node@total > 1}{assign var='liclass' value=$liclass|cat:' last_child'}{/if}

    {if $node->current}
      {* this is the current page *}
      {assign var='liclass' value=$liclass|cat:' menuactive'}
      {assign var='aclass' value=$aclass|cat:' menuactive'}
    {/if}

    {if $node->parent}
      {* this is a parent of the current page *}
      {assign var='liclass' value=$liclass|cat:' menuactive menuparent'}
      {assign var='aclass' value=$aclass|cat:' menuactive menuparent'}
    {/if}

    {if $node->children_exist}
      {assign var='liclass' value=$liclass|cat:' parent'}
      {assign var='aclass' value=$aclass|cat:' parent'}
    {/if}

    {* build the menu item node *}
    {if $node->type == 'sectionheader'}
      <li class='sectionheader {$liclass}'><span>{$node->menutext}</span>
        {if isset($node->children)}
          {Nav_menu data=$node->children depth=$depth+1}
        {/if}
      </li>
    {else if $node->type == 'separator'}
      <li class='separator {$liclass}'><hr class='separator'/></li>
    {else}
      {* regular item *}
        
      {if isset($node->children)}  
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{$node->menutext}<span class="caret"></span></a>
          {Nav_menu data=$node->children depth=$depth+1}
      </li>
        {else}
        <li><a class="{$aclass}" href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a></li>
      {/if}
        
        
    {/if}
  {/foreach}
</ul>
{/strip}{/function}

{if isset($nodes)}
{Nav_menu data=$nodes depth=0}
{/if}