Wayfinder causes menu to lose some of its style

Hi, I’m using wayfinder but it causes the ’active’ menu item to lose it style, i.e. different background and text colour to rest of menu items

The style sheet looks something like this:

body.AboutUs #aAboutUs

{
background-color: #fff
color: #8D7843
}

But, I’m not sure how to incorporate this into the wayfinder call snippet

e.g. [!Wayfinder? &startId=`0` &level=`1`!]

Do I use something like &selfClass=’active’ and if so, how would I change the css to reflect this?

Thanks,
Emma

Emma,

I’m not sure I follow....however, Wayfinder does not apply any CSS styles to your menu. It does however apply two classes by default - "last" and "active" for the last and active menu items respectively. Could you provide more info please? e.g. screenshots, your WF template chunks, links, version of WF you are using, etc.

cheers/k

Hi, I’m using version 0.9.6.3

This is an idea of of the homepage template

{{thehatshop_header}}

<body class="Home">
...

<div id="divNavigation">
<ul>
Way finder snippet
</ul>


<div id="content">
[*content*]
</div>


{{thehatshop_footer}}

This is the part of the css file that is used for the ’active’ menu item

e.g. if homepage

body.Home #aHome{
style to make current menu item a different colour from rest of menu items
}

When I use wayfinder, the style is lost, i.e. there is no distinction between the current active page and the other menu items

OK, I think I get you now...

If your goal is to apply a distinct style to the currently active menu item AND its parent items, you can take advantage of what I wrote above....WF will automatically assign the class="active" to the currently active menu item and its parent items all the way up the document tree. All you will need to do is to create a CSS style for this.

e.g

CODE EDITED FOR ERROR

This class "active" is the default value of the WF class parameter called &hereClass. If you want to use a different name you can add this to your WF call, e.g.



If on the other hand you want to apply a distinctive style to ONLY the currently active menu item, you can use the &selfClass. So, you would do something like



Then in your CSS

CODE EDITED FOR ERROR

So you do not have to use the "body.Home" method.

Hope this helps

/k

Hi, thanks for the quick response

My snippet call is as follows:


<div id="divNavigation"><ul>

[!Wayfinder? &startId=`0` &selfClass=`current`!]
</ul>
</div>


My css is as follows:

#divNaviagation ul li a.current {
background-color: #fff;
color: #8D7843;
}

I’ve also tried using the following:

#divNaviagation li a.current {


This all looks okay to me, unless I’m missing something, but it still isn’t working

Have you checked for:

1. Typos - e.g. #divNaviagation ?

2. Checked that there are no conflicting CSS rules?

/k

oops, sorry, my bad...the class is applied to the li not the a...

so the CSS should be

Thats it, all working

Thanks, I really appreciate it

Emma

Glad it worked out

I notice too that you have placed your WF call between <ul></ul> tags. Any reason for this? I ask because a WF menu will be auto generated with those tags wrapping the menu. So, unless you have a modified your outerTpl, there’s really no need for the "extra" <ul> tags...for one, your site won’t validate coz you’ll end up with something like <ul><ul><li></li></ul></ul>...

cheers/k

No reason really, except that I’m new to modx

So, thanks again for all your help

I dont suppose you could help with a FURL issue?

http://modxcms.com/forums/index.php/topic,36081.0.html

I’ve also looked at this and no use

http://svn.modxcms.com/docs/display/MODx096/Friendly+URL+Solutions

Emma