Return to previous page

Incorrect Breadcrumb Display (Theme Option vs. Elementor) & Whitespace Issue

This topic has 4 replies, 2 voices, and was last updated 2 months ago ago by Jack Richardson

Acrdev

Participant

September 29, 2025 at 09:48

Hi 8theme Support Team,

I am experiencing an issue with the breadcrumbs on my website, which are behaving differently depending on how they are created.

Theme Option Breadcrumbs: On pages where I’ve enabled breadcrumbs using the XStore theme options (like my “About Us,” “Contact Us,” and “Checkout” pages), they are not displaying correctly. The styling appears broken on both desktop and mobile views.

Elementor Breadcrumbs: In contrast, on my “Shop” page, I used an Elementor widget to create the breadcrumbs, and they look perfect and are fully responsive on all devices. This is the appearance I want to achieve across the entire site.

Whitespace on Checkout Page: A side effect of this issue is on the checkout page. There is a large, unwanted white space at the top of the page, which seems to be caused by the container for the broken breadcrumb.

I have attached images of the “About Us” page (incorrect), the “Checkout” page (showing the whitespace), and the “Shop” page (correct) so you can see the difference clearly. (in about us page background image is not looks properly and the title of the breadcrumb goes on the top which i want to correct)

Could you please help me correct the styling of the theme-generated breadcrumbs to match the Elementor version and provide a solution to remove the extra white space on the checkout page?

Thank you for your help.

Files is visible for topic creator and
support staff only.

#456144 Copied

3 Answers

Jack Richardson

Support staff

September 29, 2025 at 14:12

Hello @Acrdev,

The spacing issue on your page is caused by the custom styles added in Theme Options -> Theme Custom CSS (https://prnt.sc/tq7eMroKD-UV).

We also noticed that you are using the header overlap setting. We recommend creating a separate header with this option enabled and applying it only to the Home page where it is required. For other pages, there is no need to use the header overlap feature (https://www.8theme.com/documentation/xstore/xstore-builders/new-xstore-header-builder-with-elementor/#eatures-gwnx12).

Additionally, based on our review with web tools, the value for the breadcrumbs font size has been set without a unit (https://prnt.sc/L8IAsy4krbVn).

Best regards,
8Theme Team

#456174 Copied

Acrdev

Participant

September 30, 2025 at 09:58

Hello 8Theme Team,

Thank you for your response and clarifications.

I would like to ask for your guidance regarding the breadcrumb background image on mobile view. Currently, the background image does not scale or position correctly on smaller devices, and the breadcrumb title sometimes overlaps the top area.

Could you please suggest the recommended CSS for setting the breadcrumb background image so that it displays properly and responsively on mobile devices? For example, should I be using background-size: cover; background-position: center; or any specific settings you recommend for XStore?

My main goal is to make sure the breadcrumb background image looks consistent on desktop and mobile without the title being cut off or misaligned.

Thank you for your assistance.

Files is visible for topic creator and
support staff only.

#456231 Copied
Jack Richardson

Support staff

September 30, 2025 at 10:26
Hello @Acrdev,

As you know, each design is based on the customer’s specific requirements. If you would like to make the breadcrumb background image responsive, you will need to apply some custom styles within specific CSS media queries.

You can test the positioning using tools such as https://nikitahl.github.io/bg-image/ or apply your own custom styling, for example:

@media only screen and (max-width: 768px) { .page-heading, .breadcrumb-trail { background-position: right center !important; } }

Alternatively, you may use the following:

@media only screen and (max-width: 768px) { .page-heading, .breadcrumb-trail { height: 100%; background-size: cover; background-position: bottom center !important; aspect-ratio: 250 /79; } }

Please note that there is no ready-made solution for this.

Best regards,
8Theme Team
#456238 Copied
Viewing 4 results - 1 through 4 (of 4 total)