Complicated Menu Styling help

Hi, I think I may have complicated my menu before using Wayfinder.

Can someone help me understand how to style my Wayfinder menu to look like the one that I want it to?


I placed both menus into my template in order to see what needs to happen. The unordered list is what Wayfinder puts out. The lovely blue menu below with the drop-down is what I’d like it to look like. I styled it with CSS.

Is there even a way to do that with Wayfinder?

Here is the link: www.lifewater.org/modx

And attached is the image...

Thanks so much!!

Hi klarsen7,

Is there even a way to do that with Wayfinder?

sure

there’s also a wayfinder config package which has your desired effect, you would just need to adapt your css-styles:
http://modxcms.com/forums/index.php?topic=31376.0
http://modxguru.com/jquery_superfish_multi_lavel

hope that helps, j

Show us some code please? I mean your Wayfinder tpl chunks and calls. It is just a matter of specifying CSS classes/ids either in your WF tpl chunks or using WF class parameters. It is much easier to explain what goes where if we see your tpl chunks.

cheers/k

You could use this code to get you closer, but you will need to make your menu more generic for to get things working properly. Oh, here is a good place to start for wayfinder: http://www.muddydogpaws.com/development/wayfinder/parameters.html also check out kongondo’s wayfinder book (see his sig)

add to wayfinder call: &rowIdPrefix=`submenu` (plus calls for each template)

outertpl:


&parentRowTpl



&innerTpl



The problem is each main link has custom classes (class="aboutus-nav") and I don’t know how to generate this level of customization. You can use rowIdPrefix to some effect, but basically the menu would need to be recoded to work as desired.

AMDbuilder

Hi guys!
Thanks for your help with this. I’ve nearly got it and am very close. I had to make some adjustments so the menu I origninally wanted is not the same. But I think it is pretty close:

Here’s what I wish I could achieve: http://lifewater.org/tests/

And this is what I have modified it to: http://lifewater.org/modx/

And here is my wayfinder code:
<div id="nav-container" style="margin:auto;">
[[Wayfinder? &startId=`0` &level=`2` &outerTpl=`wfOuter` &innerTpl=`wfInner` &rowTpl=`wfRow` &hereClass=`active` ]]</div

outer:<ul id="menu">
[+wf.wrapper+]
</ul>
inner:
<ul>
[+wf.wrapper+]
</ul>

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


If there is any advice in how to do this better, I would really appreciate it.
Thanks!

Did you look into the code I provided? You should be able to get closer to the original with it, but you will need to rework the custom ID’s. Regardless it looks like you’ve made some good progress.

AMDbuilder