Tutorial: Full Width Breadcrumbs on Genesis child themes

In many of the Genesis child themes the built-in breadcrumbs use the genesis_before_loop hook. Depending on the type of child theme you are building what if you wanted the breadcrumbs to span full width instead? This is how I achieved it when I built the Malcolm child theme.

//* Reposition the breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
add_action( 'genesis_after_header', 'genesis_do_breadcrumbs' );

In the code block above (which is added to the child theme’s functions.php file) I unhooked the breadcrumbs function from the genesis_before_loop hook and added it to the genesis_after_headerhook. This caused the breadcrumbs to span the full width of the site.

Next, I added a wrapper as seen in the code block below. (also added to functions.php)

//* Add wrapper to breadcrumbs
add_filter( 'genesis_breadcrumb_args', 'malcolm_breadcrumb_args' );
function malcolm_breadcrumb_args( $args ) {
 $args['prefix'] = '<div class="breadcrumbwrapper"><div class="breadcrumb">';
 $args['suffix'] = '</div></div>';
 $args['sep'] = ' &raquo; ';
    return $args;
}

As you can see I added a new class called breadcrumbwrapper to the existing breadcrumb class. I also modified the separator to display a »

And now for the CSS used in the Malcolm child theme.

.breadcrumbwrapper {
 background-color: #1b1b1b; 
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1f1f1f), to(#1b1b1b));
 background-image: -webkit-linear-gradient(top, #1f1f1f, #1b1b1b); 
 background-image:    -moz-linear-gradient(top, #1f1f1f, #1b1b1b);
 background-image:     -ms-linear-gradient(top, #1f1f1f, #1b1b1b);
 background-image:      -o-linear-gradient(top, #1f1f1f, #1b1b1b);
 border-bottom: solid 1px #333;
}

Now the styling I went with in the code block above isn’t important. I chose a background colour, used a gradient and added a bottom border. But as I said it’s not important, it’s merely a wrapper.

The important part is centering the breadcrumb within the breadcrumbwrapper. Here is what I did,

.breadcrumb {
 margin: 0 auto;
 max-width: 1160px;
 padding: 20px 0;
}

The first line margin: 0 auto; centers the breadcrumb nicely within its wrapper. On the second line I added max-width: 1160px; because the Malcolm child theme uses a max-width of 1160px for both .site-inner and .wrap I then added a top and bottom padding of 20px.

That’s all there is to it. You can see it in action by visiting the Malcolm demo site and clicking on a post.

If you’re interested there are quite a few arguments that can be used with the Genesis breadcrumbs function. Have a look at the link below.
http://my.studiopress.com/snippets/breadcrumbs/