So many thoughts. So little time.

Tag Archives: navigation

CSS – How To Create Colored Link Website Navigation-Bar WordPress “Breadcrumbs”

Thanks to WordPress automatically adding new CSS classes of its own to the navigation structure since WP3.0, color-indicated “breadcrumb” navigation is now possible, not only via the navigation bar, but using widget menu links or even links within an article! Dynamic Navigation Link Coloration is easy, now!

Here are the new classes we’re getting to play with in the navigation now:

li.current-menu-item a { }
li.current_page_item a { }
li.current_page_ancestor a { }
li.current_page_parent a { }
li.current-post-ancestor a { }
li.current-post-parent a { }
li.current-menu-ancestor a { }
li.current-menu-parent a { }
li.menu-item-object-category a { }
li.menu-item-object-post a { }
li.menu-item-object-page a { }
li.menu-item-type-taxonomy a { }

Note that some of the above use underscores, and others use hyphens.

“Parent” usually indicates that a parent had been assigned when creating the page, while it refers to the category when referring to a post. It gets pretty hairy – when selecting a post from a category archive menu item, the resulting page displays “current-post-ancestor” “current-menu-parent” AND “current-post-parent” as that menu item’s new classes, each presenting a different opportunity for coloring that category-archive menu item’s link! (I present how it is done with category archive links in the video.)

“current-menu-ancestor” is more to do with drop-down menus (sub-menus), indicating all of the higher menu item(s) in the hierarchy. “current-menu-parent” is the immediately higher menu item in a sub-menu, mostly useful with two or more levels cascading sub-menu items.

Make your code affect only the first element using the greater-than “>” sign.

I first read about WordPress adding these new classes at this site: http://www.designisphilosophy.com/tutorials/highlight-current-page-or-category/

But, frankly, it took me a while to comprehend what on earth the author was driving at (and how to actually USE that information!)

Here we have a video that explains some things, and I’ve included example code below.

And the Addendum #1 recorded almost immediately after watching the first one:

The order of items is important, as they “cascade”. It is important to always remember that CSS ALWAYS reads from top-to-bottom on both the HTML page and in your CSS definitions, sequentially taking in each of your design items one after the next, with ones lower on the page superseding higher ones. Thus, the initial “fallback” items are at the top. On the web page itself, the same rule holds – it reads from top-to-bottom, so you always have to find relevant “selectors” that come BEFORE the class, ID or element that you want to ultimately affect.

And here are the code examples. (The videos cover how to get the best selectors for your theme.)

/* Table of Contents */
/*-------------------------------------------------------------*/
/* Navigation Background Color */
/* Default colors for all navigation bar links */
/* Current Page Ancestor - the parent page's link on the nav bar */
/* Current Page Item */
/* Sub-menu Current Menu Item */
/* Sub-Menu Current Page Item */
/* Highlight Category Article Posts Link on Single Pages (but not Blog Posts link) */
/* Highlight Main Blog Posts Link on Single Pages */
/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
/* Navigation Background Color */
 .yourBestSelectors(NavBar) {background:white !important; }
/*-------------------------------------------------------------*/
/* Default colors for all navigation bar links */
 .yourBestSelectors ul li a { color:gray !important; font-weight:bold !important; }
 .yourBestSelectors ul li a:hover {color:red !important; }
 .yourBestSelectors ul li a:active {color:blue !important;}
 .yourBestSelectors ul.sub-menu li a { color:green !important; font-weight:bold !important; }
 .yourBestSelectors ul.sub-menu li a:hover { color:red !important; }
 .yourBestSelectors ul.sub-menu li a:active { color:blue !important; }
/*-------------------------------------------------------------*/
/* Current Page Ancestor - the parent page's link on the nav bar */
 .yourBestSelectors ul li.current_page_ancestor a {color:orange !important; }
/*-------------------------------------------------------------*/
/* Current Page Item */
 .yourBestSelectors ul li.current_page_item a {color:yellow !important; }
/*-------------------------------------------------------------*/
/* Sub-menu Current Menu Item */
 .yourBestSelectors ul.sub-menu li.current-menu-item a {color:gray !important; }
/*-------------------------------------------------------------*/
/* Sub-Menu Current Page Item */
 .yourBestSelectors ul.sub-menu li.current_page_item a {color:yellow !important; }
/*-------------------------------------------------------------*/
/* Highlight Category Article Posts Link on Single Pages (but not Blog Posts link) */
.yourBestSelectors ul li.menu-item-1905 > a {color:#1a91a1;}
/*-------------------------------------------------------------*/
/* Highlight Main Blog Posts Link on Single Pages */
.yourBestSelectors ul li.current_page_parent.menu-item-1820 a {color:#1a91a1; font-weight:bold;}

Those last two examples are handy when landing on a page that is arrived at via a widget menu item or an on-page link reference. Naturally, the menu-item-## will change from theme-to-theme. Analyze your page source to get that info.

(The videos also cover using Firefox’s Firebug, or alternatively Chrome’s and other’s “Inspect Element” right-click menu item, which work very similarly. The videos additionally expose the fact that using Child Themes are not for the rich and famous only. Anyone can – and should – edit their theme’s CSS styles this way.)

Sometimes you have to force the color changes using the !important command inserted before the semi-colon of each color. (That’s an exclamation mark before the word “important” there.) Especially in cases where the definitions were applied to an ID rather than a class, you’ll need that !important item to override its settings. Basically, whenever something that should be working isn’t working, try this, but also look for missing commas, semicolons, or selectors and/or elements like I managed to miss LIVE on both videos at one point or another…

Note the ancestor code is at the top of this CSS definitions section, followed by the page item and category menu items. You’ll sometimes find that matters a lot.

So, how do you determine what .yourBestSelectors are? That can be tricky! For that, view the videos!

I will tell you that targeting IDs as opposed to classes is easier, since you don’t have to worry about the context. By definition, an ID is only supposed to appear once on a page, so it is always unique, whereas a class is permitted to be used in multiple locations on the same page, so it needs some information accompanying it to give the reference as to which instance you are using it in.

Also, you can combine a couple of items that will have the same settings using commas. Be aware, however, that things like two ID-defined items may both need the ID, as in a situation I just encountered:

Didn’t work correctly:

#block-22 ul.special-nav li.current-menu-item, li.current_page_item a {
    color:lightBlue !important; text-weight:normal;
    }

Worked correctly:

#block-22 ul.special-nav li.current-menu-item,
#block-22 ul.special-nav li.current_page_item a {
    color:lightBlue !important; text-weight:normal;
    }

This example needed to override the current_page_item setting that affected other nav-bars, but couldn’t affect this special one. If I didn’t include the second #block-22, it would override the default use of the class. Who would have guessed! Both classes are legit for the same menu item! Well, that’s why they call them “Cascading Style Sheets”!

Here is the code that was included in the child theme for the twenty-eleven theme mentioned in the video:

/*
 Theme Name: Twenty Eleven Child Test
 Theme URI: http://terrybritton.com
 Description: Child theme for the Twenty Eleven theme
 Author: Terry Leigh Britton
 Author URI: http: //terrybritton.com
 Template: twentyeleven
 Version: 1.0
 */
@import url("../twentyeleven/style.css");
li.current-menu-ancestor > a, li.current_page_item > a, li.current_page_ancestor > a {
 color: #1A91A1 !important;
 }
 li.current-menu-item > a {
 color: orange !important;
 }
 li.current-post-ancestor, li.current-menu-parent, li.current-post-parent a {
 color: lightBlue !important;
 }

The “Early Morning” Child Theme for the Thematic parent theme by cozmoslabs.com can be found here:
http://www.cozmoslabs.com/

To make life easier on yourself, if you have a theme that supports adding custom classes to your individual blocks , one thing you should do first is name your navigation bar or widgetized menu with a custom name and assign it an allOneWord custom css class under the block’s config. Headway by Headwaythemes.com makes that quite easy to accomplish. (That’s my affiliate link, if you want to purchase it through me!) I probably am going to have a review here about Headway soon.