Navigation Focus on Current Page

HTML & CSS
1

Hey Guys,

Was wondering if theres a way to do this with CSS my site uses php for the header/navigation and its a Wordpress site.

What I’m looking to do is highlight the section your in on the navigation.

Here is the site…

For example say you roll over Commercial when you go to the sub nav of commercial I still want the Commercial to be in orange and with the triangle thing there then say you click Asbestos Abatement/Testing and go to that page if on the main nav at the top Commercial will still stay highlighted in the orange with the triangle next to it and also on the sidebar in Other Commercial Services I would like the actual child page the Asbestos Abatement/Testing to remain orange with the triangle on it.

Is this easily acheivable to do with this current website.

Thanks in advance you guys rock!!!,

Mike

2

What happens if you add the red bit to the CSS?


#nav li a:hover[COLOR="#FF0000"], #nav li.wpm-hover > a[/COLOR] {
  background: url("../images/nav-hover.png") no-repeat scroll 0 0 #FFFFFF;
  color: #F27A2D;
}
3

That works nicely for this first part now just for the focus on that current parent and page your on say if your at this page…

http://keatinginc.ca/commercial/asbestos-abatementtesting/

I’m looking to have in the top navigation “Commercial” in the orange with the icon next to it so it shows that your in the “Commercial” section and in the sidebar the “Asbestos Abatement/Testing” would be highlighted in the orange with the triangle next to it.

Thanks,

Mike

4

This is kind of easy with a static site, but not sure of the technicalities with a WP site. But you can, for example, place a class like class=“comm” on the body element of all pages in the Commercial section, and on the Commercial link:

<a [COLOR="#FF0000"]class="comm"[/COLOR]>Commercial</a>

and then create an extra rule like this for the main menu:

.comm #nav li.wpm-hover a.comm {
  background: url("../images/nav-hover.png") no-repeat scroll 0 0 #FFFFFF;
  color: #F27A2D;
}

But this is probably better done with PHP in this case. Here is an example of using PHP to highlight current links:

Or you could also take the easy route and use JavaScript:

5

The CSS way didnt seem to work at all, can you take a look at the page did it for the Commercial items and pages, maybe I’ll have better luck with the Jacascript but would really like to do it using CSS

6

Ok, I got it working using the Javascript but only got it working on the main navigation and for some reason the text wont stay orange any reason?

And even though the sub-nav has the .selected class it does not show up with the background picture…

Heres link to the page…

http://keatinginc.ca/commercial/asbestos-abatementtesting/

7

Ok, got the sub nav working now, but for some reason the text doesnt change colour on the active page even though I have the text-colour changing in the CSS, any ideas why?

8

OK, you aren’t quite targeting the right elements there. Try making these changes:

Instead of this:

.selected {
  color: #F27A2D !important;
}

change to:

.selected [COLOR="#FF0000"]> a[/COLOR] {
  color: #F27A2D !important;
}

And instead of this:

.current_page_item {
  color: #F27A2D !important;
}

change to:

.current_page_item [COLOR="#FF0000"]a[/COLOR] {
  color: #F27A2D !important;
}

Those rules were targeting the parent list items instead of the actual <a> elements you need to style.