XF 2.0 Mobile breadcrumb display missing/truncated.

limboclub

Active member
This was my fix to get breadcrumbs to display better in mobile.


I don't know how to get the old ellipsis back, so if anyone has info they'd like to share it would help a lot.

Breadcrumbs are a very important element of UI, specially on mobile. You should do your users a favour and return them.

Template: app_breadcrumbs.less

Change these responsive elements:


CSS:
@media (max-width: @xf-responsiveMedium)
{
    .p-breadcrumbs > li a
    {
        // max-width: 200px;
    }
}

@media (max-width: @xf-responsiveNarrow)
{
    .p-breadcrumbs
    {
        > li
        {
            //display: none;
            font-size: @xf-fontSizeSmall;

            &:last-child
            {
                display: block;
            }

            a
            {
                //max-width: 90vw;
            }

            &:after
            {
                //display: none;
            }

            /*&:before
            {
                .m-faContent(@fa-var-chevron-left, .72em, ltr);
                .m-faContent(@fa-var-chevron-right, .72em, rtl);
                margin-right: .5em;
            }*/
        }
    }
}
 
Last edited:
Top Bottom