Vista-like breadcrumbs separator

  • Resolved maurelius

    (@marcuscake)


    7 months, 1 week ago

    The vista-like breadcrumbs were straightforward to setup, but I can’t get a separator to display (as defined in NavXT settings, or with custom css).

    I installed ‘Breadcrumb NavXT Multidimension Extensions’ plugin, followed the style component at https://mtekk.us/archives/guides/vista-like-breadcrumbs-for-wordpress/ and then installed a widget and selected ‘Multidimension (children in second dimension)’. It worked quickly and easily. I am able to change the style to what I need, but my CSS skills are limited.

    I am unable to implement a separator between the breadcrumbs. The separator defined NavXT settings does not appear, and I tried some before:: and ‘content’ CSS attributes but couldn’t get the a separator to appear.

    I tried some trouble shooting strategies to implement separators for some time including removing individual pieces of the style guide and seeing if the separator would appear (as defined in the core ‘Breadcrumbs NavXT’ plugin).

    I am hoping someone could help me with this.

    Ideally, the ‘Breadcrumb NavXT Settings (General tab) – ‘Breadcrumbs Separator’ setting would flow through. This setting does work on the plain NavXT breadcrumb.

    Any help would be much appreciated.


Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author John Havlik

    (@mtekk)

    The article you linked to provides CSS that does work (you need to add it to your theme/child theme’s style.css or add a style via a site specific plugin), but it expects a breadcrumb trail that is in li elements. The multidimension extensions does that. When using li elements to wrap the breadcrumbs, the breadcrumb separator is not used, you must use CSS to get a separator in this case.

    Thread Starter maurelius

    (@marcuscake)

    It was an excellent article and user guide and I got a quality result quickly. Thanks! I just needed some guidance. Thanks for the clarification.

    Thanks! I have experimented with CSS and came up with the following:

    .breadcrumbs > li:after {
	content: '/';
	display: inline;
	font-size: 1.0em;
	text-decoration: bold;
	color: red;
	margin: 0px 0px 0px 0px;
	padding: 0px 5px 0px 5px;
}

    The above works, but it does result in a trailing separator at the end of the breadcrumb (which is not required). After hours of experimenting and trying to upgrade my CSS skills, I will need some help removing the trailing separator at the end of the breadcrumb.

    If I use :before (instead of after) then the separator is at the beginning (which is not required).

    Thanks in advance.

    Plugin Author John Havlik

    (@mtekk)

    You’ll need to use a CSS selector to get all but the last element when adding in the separator. Something like :nth-last-of-type(n+2) should work. So, instead of .breadcrumbs > li:after try .breadcrumbs > li:nth-last-of-type(n+2):after. I’m sure there are several other ways of doing this, but this is what came to mind first.

    Thread Starter maurelius

    (@marcuscake)

    Thank you John! Your suggestion implemented in 2 minutes. Solved! Thank you! I really appreciate it!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Vista-like breadcrumbs separator’ is closed to new replies.