XF 2.2 How to retain full breadcrumb in mobile view?

Solution
Template app_breadcrumbs.less

Change this:
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-fontSizeSmallest;

            &:last-child
            {
                display: block;
            }

            a
            {
                max-width: 90vw;
            }

            &:after
            {
                display: none;
            }

            &:before
            {
                .m-faContent(@fa-var-chevron-left, false, ltr);
                .m-faContent(@fa-var-chevron-right, false, rtl)...
I'm not sure I understand what you're asking but try this:

Add to extra.less

Code:
/* Display page navigation at top of pages mobile */
@media (max-width: @xf-responsiveNarrow){
.block-outer:not(.block-outer--after) .pageNavWrapper:not(.pageNavWrapper--forceShow){
display: block;
}
}
 
I'm not sure I understand what you're asking but try this:

Add to extra.less

Code:
/* Display page navigation at top of pages mobile */
@media (max-width: @xf-responsiveNarrow){
.block-outer:not(.block-outer--after) .pageNavWrapper:not(.pageNavWrapper--forceShow){
display: block;
}
}

I want the full path appeared in breadcrumb in mobile view instead of the link to last node only ("Styling and customization questions" in this example).

2021-01-29_13-50-18.png

Your code doesn't work.

And I got short node names, so space is not a problem for me.
 
Last edited:
Template app_breadcrumbs.less

Change this:
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-fontSizeSmallest;

            &:last-child
            {
                display: block;
            }

            a
            {
                max-width: 90vw;
            }

            &:after
            {
                display: none;
            }

            &:before
            {
                .m-faContent(@fa-var-chevron-left, false, ltr);
                .m-faContent(@fa-var-chevron-right, false, rtl);
                margin-right: .5em;
            }
        }
    }
}
To this:
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;
            }*/
        }
    }
}
 
Solution
Its coming from this extension from @Ozzy47

 
It's not part of the addon, if you look at this topic this is a template modification to show full breadcrumbs on mobile and it functions as intended.

However when combined with the addon above it seems to not display properly.

I have tried modifying the addon and Template app_breadcrumbs.less and so far have not figured it out.
 
It's not part of the addon, if you look at this topic this is a template modification to show full breadcrumbs on mobile and it functions as intended.

However when combined with the addon above it seems to not display properly.

I have tried modifying the addon and Template app_breadcrumbs.less and so far have not figured it out.
Then if it an issue when combined with that add-on, it will be the add-on causing the issue. By your statement, when you enable that add-on it causes problems, when the add-on is disabled, it doesn't.... so, ask in the add-on thread itself and you will be more likely to get assistance.
 
Back
Top Bottom