I am creating a website using a template html adapting to cms
but I have problems with the menu and do not understand how to fix them
I use this menu template
{* Note1: bootstrap v3 does not natively support more than 2 levels of nav so call with number_of_levels=2 for performance *}
{* Note2: add the loadprops=0 param for performance, this template does not need extended params *}
{* Note3: Pages with children will behave like section headers, and not be navigable.. this is also default behavior with boostrap v3, investigate the css to activate the dropdown on hover instead of click *}
{if $count > 0}
<ul class="nav navbar-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="dropdown-menu">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{$classes=''}
{if $node->parent == true or $node->current == true}
{$classes='active'}
{if $node->parent== true}{$classes=$classes|cat:' parent'}{/if}
{/if}
{if $node->type == 'sectionheader'}
{if $node->haschildren == true}
<li class="dropdown {$classes}"><a class="dropdown-toggle {$classes}" data-toggle="dropdown"><span>{$node->menutext}</span></a>
{else}
<li class="nav-header">{$node->menutext}</li>
{/if}
{elseif $node->type == 'separator'}
<li style="divider">
{elseif $node->haschildren == true}
<li class="dropdown {$classes}"><a class="dropdown-toggle {$classes}" data-toggle="dropdown" {if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{else}
<li class="{$classes}"><a class="{$classes}" {if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
{/if}
the website template are:
Code: Select all
<!-- Toggle Button for Mobile Navigation -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#buildpress-navbar-collapse">
<span class="navbar-toggle__text">MENU</span>
<span class="navbar-toggle__icon-bar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</button>
</div>
<div class="sticky-offset js-sticky-offset"></div>
<div class="container">
<div class="navigation">
<div class="collapse navbar-collapse" id="buildpress-navbar-collapse">
<ul id="menu-main-menu" class="navigation--main">
<li class="current-menu-item"><a href="index.html">HOME</a></li>
<li><a href="projects.html">PROJECTS</a></li>
<li class="menu-item-has-children">
<a href="services.html">OUR SERVICES</a>
<ul class="sub-menu">
<li><a href="services-content/construction-management.html">Construction Management</a></li>
<li><a href="services-content/design-and-build.html">Design and Build</a></li>
<li><a href="services-content/kitchen-remodeling.html">Kitchen Remodeling</a></li>
<li><a href="services-content/tiling-and-painting.html">Tiling and Painting</a></li>
<li><a href="services-content/condo-remodeling.html">Condo Remodeling</a></li>
<li><a href="services-content/hardwood-flooring.html">Hardwood Flooring</a></li>
<li><a href="services.html">All Services</a></li>
</ul>
</li>
<li><a href="about.html">ABOUT US</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="shop.html">SHOP</a></li>
<li><a href="contact-us.html">CONTACT</a></li>
</ul>
</div>
</div>
</div>
thanks
