This is possible using CSS or jQuery (although this is not very good).
@media (max-width: 768px) {
.ast-breadcrumbs a[rel~='home'] {display:none}
}
or:
jQuery(document).ready(function($) {
var responsive_viewport = $(window).width();
if (responsive_viewport <= 768) {
$(".ast-breadcrumbs a[rel~='home']").css("display","none");
}
});
This thing: ” » “also needs to be removed.
I wrote the code as an example only and did not test well. I would not remove these links from breadcrumbs.
Remove “Home” and “»” :
@media (max-width: 768px) {
.ast-breadcrumbs a[rel~='home'],.ast-breadcrumbs .trail-item.trail-begin:after {display:none}
}
The .trail-end class is responsible for the “post title”
Thanks @zabavljaev This only removes the home link and the ». Not sure what you mean by .trail-end class is responsible for the “post title”
home link and the » and post title
@media (max-width: 768px) {
.ast-breadcrumbs a[rel~='home'],.ast-breadcrumbs .trail-item.trail-begin:after,.ast-breadcrumbs .trail-item.trail-end {display:none}
}
Thanks @zabavljaev That worked! 🙂 Is there a way to hide the last » as well?
If you need to remove all separators, then it’s easier to do this:
@media (max-width: 768px) {
/* Remove "home", "post title" */
.ast-breadcrumbs a[rel~='home'],.ast-breadcrumbs .trail-item.trail-end {display:none}
/* Remove all » */
.ast-breadcrumbs .trail-items li::after {display:none}
}
or
@media (max-width: 768px) {
/* Remove "home", "post title" */
.ast-breadcrumbs .trail-item.trail-begin,.ast-breadcrumbs .trail-item.trail-end {display:none}
/* Remove all » */
.ast-breadcrumbs .trail-items li::after {display:none}
}
Thanks, but I only want to remove the last » (I put it in bold although it might be difficult to see)
Sometimes I have category » other times category » subcategory1 » and other times category » subcategory1 » subcategory2 » Is this possible?
It tried using
.ast-breadcrumbs .trail-items.trail-end li::before {display:none}
and
.ast-breadcrumbs .trail-items.trail-end:before {display:none}
but it doesn’t work.
Try it like this:
.ast-breadcrumbs .trail-item:nth-child(2n):after {display:none}
: or :: – works the same. Are you sure you really need to cut breadcrumbs? I would not do that.
Experiment with the pseudo-classes: first-child,: last-child,: nth-child (0,1,2 …). Must look with subcategories. Until I see how to do it.
I think, however, that this is not possible, since each entry may have a different number of categories and subcategories. Nothing to catch on.
I can’t choose the penultimate li:after.
remove “post title”:
.trail-items > .trail-item:last-child {display:none}
or
.trail-items li:last-of-type{display:none}
