Changing breadcrumbs delimiter & Bootstrap

[Eleven Sites]

Hi Jason,

I’m trying to change the breadcrumbs delimiter using the following code.

/*-------------------------------------------------------*/
/* Modify ThemeBlvd breadcrumb delimiter
/*-------------------------------------------------------*/
 
function my_breadcrumb_atts( $atts ) {
    $atts['delimiter'] = '<span class="divider">></span>';
    return $atts;
}
add_filter( 'themeblvd_breadcrumb_atts', 'my_breadcrumb_atts' );

I’ve added this before the framework is called in my functions file. Although, it is showing, it’s not taking the place of the default delimiter “/”. So, both delimiters are showing, but I’m guessing that the second delimiter is being put there by Bootstrap.

I’ve tried to modify the delimiter with my custom CSS file, but it’s not overwriting the bootstrap.min.css values. How do I get rid of the Bootstrap delimiter?

Topic

[Jason Bobich]

Hello,

In Bootstrap 3, they started doing it with purely CSS. The “delimiter” in the framework is sort of there just for those that want to continue to use it. But really, you can ditch the filter, and just do it with CSS.

.breadcrumb > li + li:before {
	content: "\003E";
	/* Your other styling for the divider here ... */
}

Note: \003E would be the equivalent of >.

Here’s some more info on how CSS content works in general:

http://css-tricks.com/css-content/

Here’s a handy little converter for inserting characters into CSS content:

http://www.evotech.net/articles/testjsentities.html

[Author]

Replies