Support » Theme: Astra » How to remove homepage link and post title from breadcrumbs

  • Hi,

    Is it possible to remove the homepage link and post title from breadcrumbs on mobile phones? Having the whole path pushes the article down a bit too much.

    Also, is displaying only the categories path on mobile good practice?

    Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • 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.

    zabavljaev

    (@zabavljaev)

    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}

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.