So, I just read a post on her in which someone said that, (btw i started a new thread because that other thread was extremely long and a lot of back and forth chatter)
"If you want the current page’s navigation to have a different colour then you will need to add a class to the current link on each page and use that as the trigger.
e.g. a.current-page{color:#000}
The add that class to the appropriate link:
<a href=“#” class=“current-page”>Nav</a>"
However, what i don’t get is how the browser knows that what the current page is. This seems incomplete to me.
I’ve seen some examples online of how to do this with javascript but is there a way to do this using CSS?
The browser doesn’t and ins unable to know what the “current” page is. In essence, “current page” is a human concept and the browser is not human.
If you have a CMS, you can use it to mark elements “current” ( which is essentially what the post you were reading said).
Another trick, which does not depend on a CMS, is to give a unique class, which matches the name of the page ,to the main containing element and give corresponding classes to all element which need to be targeted at specific pages.
Yes, there are quite a few ways to to it, but as D_P says, with CSS alone the best way is to put a class on the body tag and pair it with a class on the menu link.
It can also be done with PHP, if you a re into that, as mentioned nicely on this page:
Or you can do it with JavaScript easily, as shown here:
Those pages look helpful, but I am working in wordpress and I think that there may be a better way to do this. I was reading http://codex.wordpress.org/Dynamic_Menu_Highlighting and it looks like you guys have already suggested method 1 on this page. I would prefer to use method 2, but what seems funny to me about this is that every time you add a new page to your site then you have to go into the header and add code for the link for that new page. Am I correct or do I misunderstand method 2?
Hm, both of those methods look pretty inefficient to me, as yes, it seems you need to edit code every time a page is added, which is silly. The CMS I use checks the URL of the page and compares it with the link in the menu item, and if they are the same, adds the class that way (basically like the jQuery method I posted above). I don’t know if you can do it the same way with WP—that is, by checking the URL—but it should be able to do that.
If you are using a Wordpress menu, Wordpress already supplies the menu link on the current page with a class called current_page_item. So you can use that in your css to specify the special style for the current page.
So, WebMachine are you saying that I only need to add the class to the css and style it how I want then? If so what is the class? I viewed the source and looked at the class on the current page and it does change to the current page. However, it is not a consistent class each time
Look at the class for the home page
<div class=“menu-main-menu-container”><ul id=“menu-main-menu” class=“menu”><li id=“menu-item-125” class=“menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-125”><a href=“http://www.utahlibertylaw.com/”>Home</a></li>
So, it appears to me that even though wordpress sets the class of the current page to “current-menu-item page_item page-item-10 current_page_item menu-item-124” there is still some variation in that class. How to I adjust for that each time?