CMS Made Simple Forums

{* 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}

<!-- 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>

{if $count > 0}
<ul id="menu-main-menu" class="navigation--main">
{* <ul class="nav navbar-nav navigation--main"> *}
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="sub-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='current-menu-item'}
{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}