Tue, 2011-08-02 12:55
Hi All,
For my WordPress-based website, I've created a few (top-level) pages i.e. Home, About, Solutions, Contact etc.... and beneath/within some of those top-level pages, I've created sub-pages, and some sub-pages even have sub-sub-pages - so there's 2 levels of navigation, beneath the top-most level.
Now, I'm using a plugin to help me get the multi-level navigation show and work correctly (with the dropdown's, fly-out options etc.), however, there is one problem with this plugin (and most other plugin's, I believe), which is that it does not show/highlight the currently selected tab/item, which is exactly what I'm trying to achieve. In other words, if the "Home" tab/nav-item is selected, then the tab/nav-item should be styled/highlighted with a white background. Now, this part I have been able to figure out myself....however, only for those items which have just the one (top-level) option.
The problem I'm having (and which is where I need the expert-help) is that when a sub-page (or even a sub-sub-page) is selected, I would like the topmost-level item to be highlighted/styled with a white background, and the sub-page and/or sub-sub-pages should be styled just like a regular, unselected tab/nav-item, unless it's hovered over, which is when it will take on the hover style.
I have tried using .current_page_item, .current_page_parent and .current_page_ancestor...but they don't seem to be the right one's to use.
I would appreciate any and all help with the code (PHP, CSS, JS etc.) which is required to make this happen...since I'm not much of a web-coder.
I believe I would need some kind of PHP code (probably something on the lines of this here http://cssglobe.com/post/5812/wordpress-find-pages-top-level-parent-id, or perhaps the reverse of it....and I'm not exactly sure of how to do it....knowing very, very little PHP.
Thanks,
Gerard
Tue, 2011-08-02 14:10
#1
Can you please post a link to
Can you please post a link to your current wordpress site? Or at least all of the html from your navigation.
Tue, 2011-08-02 15:53
#2
Thanks Deuce....for offering
Thanks Deuce....for offering to help me out!!! Here's my WordPress website: http://www.synergyintegration.com/wpcjtabs/home-again/. The "Home" tab/nav-item is the only one to which I've currently added sub-pages and sub-sub-pages.
I've had no replies at all (from other CSS Forum sites, where I've posted for help, with this problem of mine) and this is now very encouraging. I do believe there must be a way to get this to work, however, being a newbie to WordPress and Web Coding, I currently lack the skills and knowledge to achieve something as complex as this.
Matter of fact, I've taken a look at the WhiteHouse.gov website (which seems to have an amazing navigation system, with loads of potential sub-pages under each top-level menu item), and I find that their developer hasn't been able to highlight the active/current toplevel nav/menu-item, for a sub-item/page that has been selected.
Later,
Gerard
Tue, 2011-08-02 18:59
#3
First step is
First step is validation.
Looks like you have some mismatched HTML comments
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.synergyintegration.com%2Fwpcjtabs%2Fhome-again%2F
Second step, For the current page, you will want to do something like
#dropmenu li.current_page_item a, #dropmenu li.current_page_item a:link { ... }
For the ancestor/parent pages you will want something like
#dropmenu li.current_page_ancestor a, #dropmenu li.current_page_ancestor a:link { ... }
or
#dropmenu li.current_page_parent a, #dropmenu li.current_page_parent a:link { ... }
This can start to get a bit confusing, as the secondary pages now have the current_page_item class.
You will need to study Specificity on how this works within CSS to ensure that the proper elements get the proper styling.
Maybe something like this, if you want secondary pages to have a different style
#dropmenu li.current_page_ancestor li.current_page_item a, #dropmenu li.current_page_ancestor li.current_page_item a:link { ... }
It can, and most likely will, get pretty confusing making sure all the proper elements have the proper styles without resorting to hacks (they won't be necessary, the !important should not be necessary either).
Clear up the validation errors and try the above and check back if you have any other issues.
Tue, 2011-08-02 20:18
#4
Thanks Deuce.....as
Thanks Deuce.....as suggested, I'll first fix the validation errors and will then try the other suggestions you offered.
Yeah, I know very little about specificity (and have been shying away from it for the longest time...but I guess the time has come for me to tackle it head-on).
>> Second step, For the current page, you will want to do something like
>> #dropmenu li.current_page_item a, #dropmenu li.current_page_item a:link { ... }
With regards to "current page", I think I've got that working already
As you correctly mentioned, the problem/confusion sets in when we start looking at sub-pages. For example, if we're on a page that is 3 levels deep (i.e. Sub-Home-1-2-1-1), then the parent (current_page_parent) would be the page that's 2 levels deep (i.e. Sub-Home-1-2-1), and the ancestor (current_page_ancestor) would be the page that's 1 level deep (i.e. Sub-Home-1-2). That means that we would not be able to target the top level menu/nav item i.e. "Home".
Am I correct in saying that?
Thanks,
Gerard
Wed, 2011-08-03 13:49
#5
I've managed to get rid of
I've managed to get rid of all validation errors....however, I don't believe I have the skills and/or knowledge (at this time) to achieve what I had set out to accomplish.
That being said, I've settled for this:
- If a top-level tab/nav-item is selected i.e. "Home, About Us, Solutions etc." in my case, then I will highlight that tab/nav-item (using current_page_item) with a white BG.
- If a sub-item (or sub-sub-item) is selected then I'm okay with the top-level tab/nav-item being displayed with the blue BG, and the sub-item (or sub-sub-item) whatever the case may be, will be highlighted with a white BG.
The problem I'm having though is that when I select the top-level item "Home"....all the children (or sub/sub-sub items) under that, also get styled with a white BG...which is not what I want. I want all the children to be styled with the same blue BG as the other top-level items (which haven't been selected).
The help I need is to be able to obtain the correct CSS selector's to target the items with class="children". I cannot seem to figure out how to achieve that.
The image at this link http://synergyintegration.com/images/CSS-Children-Targetting.png shows the 2 sub-items with a white BG (circled in red). The image also includes the firebug code...which I guess would be helpful in figuring out the CSS selectors.
Thanks.
Gerard