Wayfinder drop down menu not doing what I expected

Support Extras
1

Hi can anyone help me out. I’m trying to make a nav menu with this code in modx:

					<nav>
						<ul class="nav navbar-nav">
							<li><a href="[[++site_start]]" class="active">Home</a></li>
							<li><a href="about.html">Shop</a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">Workshops <b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li><a href="icons.html">About Me</a></li>
									<li class="divider"></li>
									<li><a href="typography.html">Typography</a></li>
								</ul>
							</li>
                                                        <li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">Treatments <b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li><a href="icons.html">About Me</a></li>
									<li class="divider"></li>
									<li><a href="things.html">Things</a></li>
								</ul>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">Info <b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li><a href="icons.html">About Me</a></li>
									<li class="divider"></li>
									<li><a href="items.html">Items</a></li>
								</ul>
							</li>
							<li><a href="prices.html">Prices</a></li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</nav>
				</div>
			</div>
		</nav>

I nearly got it but it isn’t quite working with the following call and snippets:

[[Wayfinder? &startId=`0` &level=`2` &outerTpl= `menuOuterTpl` &rowTpl=`menuRowTpl` &parentRowTpl=`menuParentTpl` ]]

menuOuterTpl:

    <nav>
        <ul class="nav navbar-nav"[[+wf.classes]]>
            [[+wf.wrapper]]
        </ul>
    </nav>

menuRowTpl:

<li>
<a [[+wf.classes]] href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>
[[+wf.linktext]]</a>
</li>
[[+wf.wrapper]]

menuParentTpl:

<li class="dropdown">
<a href="[[+wf.link]]" class="dropdown-toggle" title="[[+wf.title]]" data-toggle="dropdown" [[+wf.attributes]]>[[+wf.linktext]] <b class="caret"></b></a>
[[+wf.wrapper]]
</li>

Thanks if anyone can spot why this isn’t formatting how I need it or if you can please help me with a fix. :slight_smile:

1 Like
2

What is it doing? Just a weird output? You are getting your output?

My suggestion is to run the page through an online html error checker. Some weird behavior is often the result.

The piece of code you provided definitely has extra closing

elements…but you may have just cut a portion of the code.
3

Looks like you’re using Foundation? You could do with describing the problem you’re getting but if this is Foundation then I’d say a couple of things look a little out of place.

Seems odd to use dropdown-toggle / data-toggle when I wouldn’t think you’d need to toggle this.

Is “dropdown-menu” correct? Maybe try using “dropdown menu”.

4

Hi I realised after your helpful comments what was going on. Thanks for helping with your ideas!

All I needed to add as an innerTpl template that had the UL class: dropdown-menu

as OuterTpl was being used as a fallback instead by default so the menus weren’t dropping down.

Thanks again :slight_smile: