Breadcrumbs is cut off

[NadiaCrisisEquipped]

Hello,

I realized that the breadcrumbs on the desktop version looks like it’s cut off. I’m wondering if you could help me figure out how I can center the text? On mobile it looks fine, it’s just desktop that is having the issue.

My website is: crisisequipped.com
Here’s a screenshot of what’s it’s doing:

When I remove breadcrumbs altogether, it looks like this:

Thanks so much for your help!
Nadia

[nabeel]

Hi Nadia,

Thank you for reaching out to us. This is happening because the Navbar Top Height set in the Theme Options is less than the actual height of the header. To fix this, navigate to Theme Options > Header > Navbar > Navbar Top Height and set it to 127 which is the actual height of your header (see screenshot)

Let us know how this goes!

[NadiaCrisisEquipped]

Hello!

Unfortunately that didn’t work. When I changed it to 127, the navbar got bigger. This is what it looks like if I change it to 127:

And this is the original with the value at 90:

Any other ideas?
Thanks so much

[prakash_s]

Hi Nadia,

To display the breadcrumbs properly add this custom CSS code at X-> Theme Option -> CSS

.x-breadcrumb-wrap{padding-top: 5em;}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[roop555]

After having a deep look, I found the problem is
body.x-navbar-fixed-top-active .x-navbar-wrap { height: 90px;}

Please check your header design for this problem or put css

body.x-navbar-fixed-top-active .x-navbar-wrap { height: auto;}

If it is not working than add " !important " rule to the css.

Let me know if the problem is fixed or not.

[NadiaCrisisEquipped]

Ok! So just to clarify, I’m only adding the code:
body.x-navbar-fixed-top-active .x-navbar-wrap { height: auto;}

and not the code:
.x-breadcrumb-wrap{padding-top: 5em;}

Correct?

Thanks so much!!

[roop555]

Or instead anything above
You can also use:

.x-breadcrumb-wrap {
margin-top: 35px;
}

it is also working on my browser.

In most of cases, Pro or X already have those settings. So, someone do not require additional css for this kind of staffs.

[NadiaCrisisEquipped]

Thanks so much!

That works perfect on desktop. Is there any way to make it only work for desktop though?

On mobile the breadcrumbs were working fine before but now there’s an unnecessary gap,. It looks like this:

Thanks so much for your time and help!

[roop555]

Your Breadcrumb problem is fixed.
Please check it in live mode as a regular viewer not in builder.
If problem still not solved, I would like to help you in person.
Thanks!

[roop555]

Please put this CSS instead of the above:

@media screen and (min-width: 980px) {
.x-breadcrumb-wrap {
margin-top: 35px;
}
}

[NadiaCrisisEquipped]

Yeaa that looks perfect!! You’re so awesome! THANK YOU

[roop555]

You are Welcome.!

[ruenel]

Hey Nadia,

It’s good to know that your issue has been resolved. Be advised that since you are using custom CSS, you will be the one to maintain it.

Best Regards.