Wrap Breadcrumbs Pro Header

[USAT009]

I set the container and element to max width 100%, and added a custom css from a previous post on this topic, but the mobile view for breadcrumbs never fits. I just want it to wrap to two levels(or however many it needs).

[tristup]

Hi Jesse,

Thanks for reaching out.
You need to adjust the width of the Bar Container to fit the breadcrumb into the smaller screen devices. Please add the following code into the Element CSS of Bar and Container to achieve that.

@media  (max-width: 480px) 
{
   $el.x-bar-container
    {    
        margin:unset !important;
        max-width: 68%;
    }
}
@media  (max-width: 480px) 
{
    $el.x-bar-content
    {
        justify-content: stretch !important;
    }
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[USAT009]

@tristup

@media  (max-width: 480px) 
{
    $el.x-bar-container
    {    
        margin:unset !important;
        max-width: 68%;
    }
}
@media  (max-width: 480px) 
{
    $el.x-bar-content
    {
        justify-content: stretch !important;
    }
}

All that managed to do was shift everything to the left within the entire header, even when the code was only placed on specific bars and containers, it applied it globally to the entire header. And the breadcrumbs still trailed off screen on the mobile view.

[USAT009]

I just applied a custom class after realizing that once you change the “width” value it moves to multiple lines.

@media  (max-width: 480px)  {    .breadmobile {    width: 300px;  } }

[tristup]

Hi Jesse,

Can you please let us know if you are still having the issue.

Thanks