simple navigation wayfinder woes

Hi all -

I’m new to modx, new to CSS and new to Javascript, but as a freelance print designer thought it was about time I put a small website out in the ether.
As such, please go easy on me!

So far I’m loving MODx, although have to say I find aspects of it a littleconfusing once in a while but I’m slowly getting there!
I’ve spent the last couple of days learning a huge amount having only ever produced a couple of very simple websites before.

I first created my website out of simple xhtml and CSS, got it pretty much laid out okay and managed to get it to validate as XHTML strict. All good.

Next, mainly via copy and pasting large chunks of XHTML, I’ve tried to produce the same website in MODx using lots of TV’s so that its easy to update and maintain in the future.

All has gone well except for the navigation, which is where I’m really stuck.

Here is the website with its nav as I indended - http://steftock.com/dev
and here it is recreated in MODx - http://steftock.com
Please ignore the actual content for now - its just placeholder stuff... the real content will come once the site build is complete.

I’ve kind of somehow fudged the nav to work using wayfinder, but I’m sure I’ve gone about it in a really, really long winded way.
The positioning and colour I can sort out okay via CSS. The thing that is really bugging is how to remove the the first ’/’ (forward slash) before the ’Home’ link?
I want the nav to be dynamically created from page titles as I’m likely to add and change things in the future.

Can someone please help?!

I’ve been tearing my hair out all day over this and tried to follow numerous examples and guides.
I’d really appreciate it if someone could quickly knock together an example showing me how you would produce as similar nav menu using wayfinder in MODx so I can learn from it.
I know its probably a very simple task for most, and as such its really frustrating me!

Hope you can help

many thanks
Stef

Hi Stef,

you could try the Wayfinder parameter &firstClass to assign a different class to the first "row" of your menu output.
If you would give us your Wayfinder call it might be easier to help.

ottogal

You could use the technique described in the thread http://modxcms.com/forums/index.php/topic,13594.0.html to format your first separator as "display: none".
KP

A couple of things:

Normally, I’d not use wayfinder to build such a simple menu that will likely never change. It is a valid exercise in learning how to use Wayfinder to do it though.

Here is what I would do.

I’d not include the slash separator as a character in a span. I’d use a background image of the slash to appear before each of the <li> and then override it on the first <li> using the &firstClass.

Your Wayfinder call will be something like this [!Wayfinder? &startId=`0` &firstClass=`first` &level=`1`!]

Your output HTML should be somthing like:
You’re CSS Should include the following:

Post if you run into problems.

Fantastic, thanks for all your help guys - its really easy when you know how it works!

I didn’t realise that so many elements of wayfinder had CSS tags.

mashingred: your method worked well, but I wanted to keep the dividers as a text element so that the whole nav would scale up gracefully if text size is increased. Still learnt from your post though, so thanks for that!

Keith Penton: Thanks for the link - it didn’t come in my search for WayFinder... or maybe I just missed it. Exactly what I needed!

@ all: now I know how &lastCSS and &firstCSS works my Nav building will be much easier next time around!

Thanks again

It looks like you’ve just sorted this, but if you like, you could give my new version of Wayfinder a try: http://modxcms.com/forums/index.php/topic,31895.0.html

It supports specifying a different template for the last menu item with the &lastRowTpl parameter. You could then have the slashes on the right of the &rowTpl chunk, and use the same chunk for &lastRowTpl, but omit the slash.

What I would do to enable the image to scale is make the background image 40-60px high and since it will only be visible within the viewable frame of the li or the a it will grow as the line height does. That being said your way is a fair compromise. I’d use the suggestion that @dflock posted using the templates.

My reasoning for abandoning the span with the slash is if CSS is off you will have some oddball effects and since they are purely dividers only for the linear nav they will have no value in the UL as it will be self evident.

Cheers and the site looks good.

Jay

dflock: Thanks - I’m now using the updated snippet. Makes it even easier

smashingred: I see your point completely and tried to implement it. It did work, just not quite as well as I would have liked across different browsers. I think it would work perfectly with a little css tweaking, but the way it currently is, having a few ’/’ forward slashes after the main links if CSS isn’t present isn’t a deal breaker for me.

If you method is the more correct or accessible way to go about it I may revisit the Nav later. Knowing me, now that I’m startin to get the hang of things a little bit it won’t be long before I redesign my site anyway. BTW, thanks for comment about the current site in progress, means alot especially this is my first attempt at a website!

Thanks again