XF 2.2 How to retain full breadcrumb in mobile view?

[gogo]

So instead of a single link I'd like to have full path link shown.

 

[djbaxter]

I'm not sure I understand what you're asking but try this:

Add to extra.less

/* 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;
}
}

 

[gogo]

I'm not sure I understand what you're asking but try this:

Add to extra.less

/* 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).



Your code doesn't work.

And I got short node names, so space is not a problem for me.

 

[Ozzy47]

Template app_breadcrumbs.less

Change this:

@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:

@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;
            }*/
        }
    }
}

 

[gogo]

That solves my problem. Thanks, Ozzy!

 

[MapleOne]

@Ozzy47

I am getting this on mobile, lots of room but the overlap is wrong.

 

[MapleOne]

Can anyone offer help on this?

 

[Nicolas FR]

You added some more CSS code, this class .p-breadcrumbs--xf1 and maybe more, where do they come from ?

 

[MapleOne]

Its coming from this extension from @Ozzy47

[OzzModz] Breadcrumb Essentials

Nulumia submitted a new resource: Breadcrumb Essentials - Adds useful Style Properties to customize your breadcrumb, XF1 appearance, hide/show & locations! Breadcrumb Essentials for Xenforo 2 adds numerous popular and requested features by the Xenforo community! Finally, you can customize...

xenforo.com

 

[MapleOne]

Any idea even what template I would edit to fix this on mobile?

It shows properly on desktop.

 

[Nicolas FR]

Why don't you ask in the concerned add-on thread?

 

[MapleOne]

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.

 

[TPerry]

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.