Current Page Highlight Not Working

HTML & CSS
1

Hey Guys,

Ok so just having a minor issue with the site I am currently working on. In the main navigation I’m able to make the current or selected page highlighted differently from the other links in the navigation but on my interior pages in the subnavbar it doesn’t highlight when I try to do it.

Here is a page…

http://modocom.ca/lmi/industrial-fabrication/capabilities/

What I want in the subnavbar is the current page to be highlighted so Capabilities shpould be highlighted I just want it white text with no underline just for the current/selected page.

Tried to do this but just wouldnt work as you can tell in my CSS I have


.subnavbar .selected a {
  	color: #FFF !important;
  	border: none !important;
}

.subnavbar .current_page_item  {
	color: #FFF !important;
  	border:none !important;
}

If someone could give me a hand that would be great.

Thanks,

Mike

2

You need to target the anchor not the list element.

e.g.


.subnavbar .current_page_item a {
	color: #FFF;
  	text-decoration:none;
}
3

Firstly, don’t use !important, as it’s a real cop out, and should only be used in emergencies (like when you don’t have full control over the code—say when you have plugins from Google etc.).

Your first rule won’t work because there is no “selected” class above the <a>. The second rule doesn’t work because it targets the LI, while the color is actually on the <a>. You can fix it by doing this (targeting the <a>):

.subnavbar .current_page_item [COLOR="#FF0000"]a[/COLOR] {
	color: #FFF;
  	border:none;
}
Edit:

Pipped!

4

Thanks!!! Works perfectly now!!!

One more question now on the homepage…

http://modocom.ca/lmi/

In Chrome and FireFox the We Spark Progress my h5 tag looks correctly with the correct font using font-face, but when I look at it in Safari and mobile devices it doesn’t show that font, how can I fix this?

Thanks,

Mike

5

Anyone any idea on how to change this I’ve tried several different ways, but it either messed it up or just only works in Chrome.