Easy way to set up contextual breadcrumbs on child-pages only

[KEXINO]

Hi all,

Apologies if this has been asked before, but I couldn’t find a recent answer when searching.

My issue is with assigning the Breadcrumb element in Pro. I have it set in a second bar in my header, but only want it to be displayed on 'second-tier- (i.e. child) pages and all post pages. My logic is if you’re at the top-level of the site, you don’t need to see breadcrumbs.

For example, if we imagine a top-level menu item linking to a “Parent” page. Then a number of child pages under that, named “Child 1”, “Child 2”, and “Child 3”, I only want the header bar containing the Breadcrumb element to appear on the “Child” pages.

Is there a more elegant way that setting up multiple Condition Groups and manually assigning the bar to child-level pages and posts? Ideally I’d want something that would automatically scale, to work even if the client added new top-level menus, child pages, children of child pages, etc.

Thanks in advance!

[ruenel]

Hello @KEXINO,

Thanks for writing in!

You can only do this by utilizing the Paren condition with the OR condition. For example:

Best Regards.

[KEXINO]

Thanks for getting back to me. I figured there wasn’t a more ‘elegant’ way to do it. Just thought I’d check.

Two other questions with breadcrumbs.

1. The version in X allows visitors on a blog article to move to the ‘next’ or ‘previous’ post by calling the WordPress previous_post() and next_post() links. How do I replicate this within Pro?

2. I can’t seem to adjust the max-width property of the parent container holding the breadcrumbs element (to force a line-break for mobile viewports). No matter what value I enter, the element width doesn’t change. Is there a particular flexbox or other setting of the bar, container, or breadcrumb element that needs to be set to a particular value?

[ruenel]

Hello @KEXINO,

Thanks for updating in!

1.) You can create your custom single layout and assign it to your blog post items. In your layout, you can insert a Button element, and then in the button link URL, you can insert the Post Dynamic Content like {{dc:post:permalink post="next"}} and {{dc:post:permalink post="prev"}}.

2.) Please check your Width settings. The max-width settings should be at least 100%. If this does not help, please provide your WP access or at least the URL of the page.

Best Regards.

[KEXINO]

1. Thanks for that. It worked great!

2. Element max-width setting worked (thank you!) but now I have a line-height issue that I want to apply only to mobile viewport sizes:

I want to reduce line-height to have the 2 lines of text fit within the bar parent, but adjusting the height property in the breadcrumbs element has no effect.

I tried targeting the .x-crumbs-list class in CSS, but that didn’t work either. I already have custom CSS to move the position of the delimiter, since without it the delimiter isn’t aligned with the text. Could that be why that didn’t work?

[ruenel]

Hey @KEXINO,

Your Bar element height is just 50 pixels and on smaller screens that height is not enough.

Set it to auto instead especially on smaller screens.

Best Regards.

[KEXINO]

Thanks - that helped regarding keeping the text within the bar.

However I still cannot reduce line-height of the text. If I reduce the Links-> height value of the Breadcrumb element settings the text gets cut off, as though there’s a negative margin value being applied.

[tristup]

Hi @KEXINO,

Are you trying to reduce the space between the breadcrumb in the first line and the secoond line text? If so, you need to add the following custom CSS code to reduce the margin of the last item.

.x-crumbs-list-item:nth-last-child(1) a.x-crumbs-link
{
    margin-top:0px !important;
}

Please remember that the above code will work if copied as it is and doesn’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 which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks

[KEXINO]

That worked perfectly…for mobile viewports only.

I’ve added a @media (max-width: 479px)condition to the above, to only apply it to mobile viewports.

Thanks again.

[tristup]

Hi @KEXINO,

Glad that we are able to help you.

Thanks