• 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”

    Thread Starter lauratraveler

    (@lauratraveler)

    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}
    }
    Thread Starter lauratraveler

    (@lauratraveler)

    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}
    }
    Thread Starter lauratraveler

    (@lauratraveler)

    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?

    Thread Starter lauratraveler

    (@lauratraveler)

    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}

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How to remove homepage link and post title from breadcrumbs’ is closed to new replies.