How To Add Navbar Page Descriptions In Catalyst

[eric]

With WordPress you can set Descriptions (or Sub-Text) for your individual navbar pages when using the Custom Menus. To do this, however, you need to add a bit of code and tweak a few settings which is what this tutorial is all about.

The end result should look something like this:
http://catalysttheme.com/img/forum/navbar-descriptions.png (http://catalysttheme.com/img/forum/navbar-descriptions.png)

The Video Tutorial that walks you through the process is here:
http://catalysttheme.com/how-to-add-navbar-page-descriptions-in-catalyst/

Here is the Custom Functions code (you can paste this in your /wp-content/themes/dynamik/custom-functions.php file):


/* Build the description_walker class and integrate it into the Nav Menu */
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );
function my_wp_nav_menu_args( $args = '' )
{
$args['walker'] = new description_walker();
return $args;
}

class description_walker extends Walker_Nav_Menu
{
function start_el( &$output, $item, $depth, $args )
{
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

$class_names = $value = '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';

$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

$prepend_tag = '<span class="m-title">';
$append_tag = '</span>';

$description = ! empty( $item->description ) ? '<span class="m-desc">'.esc_attr( $item->description ).'</span>' : '';

if( $depth != 0 )
{
$description = $append_tag = $prepend_tag = "";
}

$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before .$prepend_tag.apply_filters( 'the_title', $item->title, $item->ID ).$append_tag;
$item_output .= $description.$args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

And here is the Custom CSS code (you can paste this in your Advanced Options > Custom CSS):


#navbar-1-wrap {
height: 50px;
}
#nav-1 li a .m-title {
margin: 0;
padding: 0;
font-weight: bold;
line-height: 15px;
display: block;
}
#nav-1 li a .m-desc {
margin: 0;
padding: 0;
color: #AAAAAA;
font-size: 12px;
font-weight: normal;
line-height: 15px;
display: block;
}

********************

UPDATE: The following PHP and CSS code should provide the same functionality, but with less code and a slight improvement of overal functionality:

The end result should look something like this:
http://catalysttheme.com/img/forum/catalyst-navbar-descriptions.png (http://catalysttheme.com/img/forum/catalyst-navbar-descriptions.png)

Here is the Custom Functions code (you can paste this in your /wp-content/themes/dynamik/custom-functions.php file):


add_filter( 'walker_nav_menu_start_el', 'custom_add_menu_description', 10, 4 );
function custom_add_menu_description( $item_output, $item, $depth, $args )
{
$args = (array) $args;

if ( $args['theme_location'] == 'primary' ) {
return preg_replace( '/(<a.*?>[^<]*?)</', '$1' . "<span class=\"menu-description\">{$item->post_content}</span><", $item_output );
}
else {
return $item_output;
}
}

And here is the Custom CSS code (you can paste this in your Advanced Options > Custom CSS):


#navbar-1-wrap {
height: 50px;
}
.menu-description {
color: #777;
font-size: 12px;
font-style: italic;
display: block;
clear: both;
}

********************

Enjoy! :)

Eric

[costafong]

Great Stuff!

[deepsouth]

I love the huge spread and level of detail that catalyst gives, so many little things attended to :-)

[justme]

This is one I’ve been waiting for. Very nice – can’t wait to use it!

[mikesmarr]

This is awesome. Thanks so much Eric. Very cool.

[eyetography]

This helped me a lot ...............

[stensworx]

This is a nice touch for the Navbar, but what code is needed to allow the description text to to "follow" the color or the top line text? Here is the site (http://www.freshbusinessincome.com).

[bambo]

Firebug or similar tool deal with such questions in a flash :) CSS builder too probably. If you are BAH to such extras you will regret one day. Law of CSS.


#nav-1 li a .m-desc {
color: whatever_match ;
}

if you remove #nav-1 it will also work on #nav-2 I would guess. Actually all you need is .m-desc but it will work as posted too.

[allensefforts]

LOVE IT. Thanks for sharing - super simple. Only thing I'd recommend is maybe indicating in the post above that the code goes in the custom-functions.php file and maybe that you can just drop the CSS in the Custom CSS section in the Advanced tab of the settings. Thank you again for sharing.

[eric]

@allensefforts

Thanks for the feedback. I just added the extra instructions. :)

Eric

[miracon]

In searching, I think this is the thread that helps me accomplish my little task. But am not sure! haha! I am just trying to bold the text on ONE of my Navbar 1 buttons. I'm just not quite knowing where to. I know this thread is about doing something different with the buttons, but I think it relates enough! Haha! Thanks for any help! :-)

[justme]

And the link to the site is ... :)

Actually it’s a different question but should be easy enough if we can see the page.

[miracon]

And the link to the site is ... :)

Actually it’s a different question but should be easy enough if we can see the page.

Thanks justme! Sorry...should have included the link!

http://barriedaycareproviders.com/

I would like to bold "Careprovider Network" and "Forum" in the Submenu of it.

Thanks in advance! :)

[justme]

Using Firebug, you can identify the IDs of the menu items. Then add your code to Advanced Options > Custom CSS. Because the submenu items automatically take on the bold from the parent item, you then need to make the others normal rather than bold:


.menu-item-141, .menu-item-138 {
font-weight: bold;
}
.menu-item-144, .menu-item-145, .menu-item-140, .menu-item-142, .menu-item-143 {
font-weight: normal;
}

http://catalysttheme.com/forum/showthread.php?3580-What-is-Firebug

[miracon]

Thanks so much justme! It worked awesome! I wasn't familiar with Firebug so am looking forward to looking into it! :-)

Edit: I actually had Firebug but didn't know what it's purpose was yet! I tried it out a bit and can't wait to have the time to learn how to use it right! I'm too busy with bamboo's advice on great video tutorials on CSS/HTML!

[jasonc]

Hopefully someone will still look at this thread.
I'm having a bit of trouble getting the CSS on the .m-desc class to respond.
Here is the site: ssfairness.com

It appears that somehow the CSS selectors are off. I'm trying a variety of changes in the CSS live builder and not seeing any changes.

Update:
Ok, I'm a bit stumped. When I place the CSS is the pre-deploy sandbox field in the CSS builder, I can see the changes appear to the menu, but as soon as I move that to the "custom css editor" with the "click here to insert", the appearance of the text reverts as though it no longer has any CSS applied.

Update: I fixed it! It turned out to be a syntax error in the custom CSS way up the chain. Probably something inadvertently done awhile back.

[jasonc]

Now that I've got this implemented, I'm wondering if it can be applied to sub-menu items as well? Would I need to change something in the custom-fuctions code to do so?

[eric]

@jasonc

If you mean Navbar 2, then it should work for that as well. I haven't tested that out, but you should just be able to add the code mentioned and then instead of the CSS provided, just change the "1" to a "2" to specify Navbar 2. So instead of this:


#navbar-1-wrap {
height: 50px;
}
#nav-1 li a .m-title {
margin: 0;
padding: 0;
font-weight: bold;
line-height: 15px;
display: block;
}
#nav-1 li a .m-desc {
margin: 0;
padding: 0;
color: #AAAAAA;
font-size: 12px;
font-weight: normal;
line-height: 15px;
display: block;
}

It would look like this:


#navbar-2-wrap {
height: 50px;
}
#nav-2 li a .m-title {
margin: 0;
padding: 0;
font-weight: bold;
line-height: 15px;
display: block;
}
#nav-2 li a .m-desc {
margin: 0;
padding: 0;
color: #AAAAAA;
font-size: 12px;
font-weight: normal;
line-height: 15px;
display: block;
}

Eric

[jasonc]

Thanks Eric, but I was actually thinking about the drop-down portion of the nav bar, the drop down sub-menus.

Might that be something like this:


#nav-1 li li a .m-title {
margin: 0;
padding: 0;
font-weight: bold;
line-height: 15px;
display: block;
}

#nav-1 li li a .m-desc {
margin: 0;
padding: 0;
color: #AAAAAA;
font-size: 12px;
font-weight: normal;
line-height: 15px;
display: block;
}

Granted this might be an awkward look, but I don't know until I try it.

[cmwwebfx]

Godsend that walker function... thank you for pointing this out. Was thinking today... how will I add this to my sites... and Bam.. here it is. Cheers.

Ciaran

[ted88888]

Hi Eric,

I lost the drop down menu when I did this. Is there a way to have both the subtext and the drop down menu work? If I leave them there then everything shows up. See the screen shot.

This feature looks great, but I need the drop down function also. Possible?

Thanks!

Ted

2485

[ted88888]

Never mind . . . figured it out - just physically dragged and moved subpages under the main pages (offset just a bit to the right did it). Easy!

[ted88888]

BTW, what you guys do here is just SUPER. Thank you for all your consistently positive and useful assistance!

Ted

[ted88888]

Next step . . . I can add the description to the drop down menu pages - but it doesn't show up. Is that possible to do?

[eric]

@ted88888

Thanks for the kind words. :)

No, I don't think you can add descriptions to the drop-down/sub-pages, just the main pages.

Eric

[ted88888]

Thanks, Eric.