Breadcrumbs icon alignment

Support
#1

Hi,

In attached image you can see that the ‘home’ icon and the breadcrumbs links align at the center (as far as I can see). It really annoys me. Best would be if the ‘home’ icon and the links were aligned top ánd bodem, like they were the same height? Or at least that they align at the bottom? Also because of the shape of the ‘home’ icon at first glance it looks like the links align with the top of the icon.

#2

Hi @yingfuli,

Thank you for writing in, but we can’t replicate the issue on our dev site, please provide us the direct page URL so we can take a closer look.

A line-height settings might have something to do with that, please try adjusting your breadcrumb’s text line-height.

Cheers!

#3

I’ve tried the line height but that doesn’t make any difference. Here is the site: https://fitklub.nl/fitklub-boxmeer/ - The breadcrumbs appear when you scroll a bit.

#4

Hello @yingfuli,

When I check the page, I am seeing this:

The home icon and the text seems inline to me. The only difference is the arrow since this is not a link and does not have the same link structure as the home icon and the text in the breadcrumb.

Hope this helps.

#5

See attached images, one in Safari and one in Firefox (both on iMac). BTW The ‘home’ icon should not be red so perhaps there is still some leftover cache at play here.

#6

Hey @yingfuli,

The red color is coming from the Site Links setup in Theme Options. If you want more control over the breadcrumbs display, please use the Breadcrumb element. I checked the structure of the breadcrumbs and it looks like you’re using a custom shortcode.

Regarding the alignment, it’s aligned on my end so it looks like you’re seeing a cached version of the page. Please clear all caches including the browser cache and check again.

Thanks.

#7

That’s a cached version of the site. Please clear the cache on your end. The images in my post before are the actual breadcrumbs.

#8

Hey @yingfuli,

It’s my first time loading your site there’s no existing cache of your site on my end. It looks like it’s your server that is at fault.

Anyway, I’ve loaded your site in incognito again and I now see the current version. The issue is the difference in aspect ratio of the home icon and the font family. The solution for this is to override the top margin of the home icon to move it above or below. Here’s the code you can add in your page CSS.

.x-crumbs-list-item:first-child .x-crumbs-link {
    margin-top: -2px;
    font-size: 0.7em;
}

You can also shrink the icon using that code.

Hope that helps.

#9

Thanks, that did the trick!

#10

You’re welcome. Glad it helped.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.