css not matching

80 Posts

tat2d Reply #11, 16 years, 11 months ago

Chunk

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

Call

[[Wayfinder? &startId=`1` &outerTpl=`leftNav` &hideSubMenus=`TRUE` &level=`1` &rowClass=`leftNavItem`]]

Teaching myself MODx

241 Posts

bob1000 Reply #12, 16 years, 11 months ago

Which template chunk is that? That would be an example of a &rowTpl chunk but you only specify an &outerTpl chunk. Assuming your &outerTpl chunk is the same as the one I used above, Wayfinder would use the default &rowTpl chunk and the output would look like:

<ul class="leftNavItem">
<li class="leftNavItem"><a href="item-1.html" title="Item 1" >Item 1</a></li>
<li class="leftNavItem"><a href="item-2.html" title="Item 2" >Item 2</a></li>
<li class="leftNavItem last"><a href="item-3.html" title="Item 3" >Item 3</a></li>
</ul>

The &rowClass parameter is adding class="leftNavItem" to every li element and the &outerTpl chunk applies the class to the ul element.

Do you want class="leftNavItem" to apply to the ul element or the li elements or both? What does your menu CSS look like?

3,975 Posts

Zaigham (aka zi) Reply #13, 16 years, 11 months ago

It would be lot easier to see it in action and diagnose by viewing it’s source in the browser. Seriously.

Zaigham R - MODX Professional | Skype | Email | Twitter

Digging the interwebs for #MODX gems and bringing it to you. modx.link

80 Posts

tat2d Reply #14, 16 years, 11 months ago

http://kittyinrose.com/value/

Teaching myself MODx

241 Posts

bob1000 Reply #15, 16 years, 11 months ago

It’s just as I thought in my first post, you’ve got nested lists so your CSS is not matching the output.

Your Wayfinder call should not be enclosed in <ul> tags so remove them from your template. You also don’t need the &rowClass parameter because your CSS isn’t referencing a class on the <li> tags. So change that to an &outerClass parameter. Your Wayfinder call should look like:

[[Wayfinder? &startId=`1` &outerTpl=`leftNav` &hideSubMenus=`true` &level=`1` &outerClass=`leftNavItem`]]

Then create (or modify) your &outerTpl chunk (leftNav) so it looks like:

<ul[+wf.classes+]>
	[+wf.wrapper+]
</ul>

Wayfinder will replace [+wf.classes+] with class="leftNavItem" and your CSS should work.

80 Posts

tat2d Reply #16, 16 years, 11 months ago

That made so much more sense, thank you! It’s working now.

Teaching myself MODx