Breadcrumbs layout

Store Design
,

Topic summary

A user is experiencing a layout issue with breadcrumbs on their Palo Alto theme store. After previously receiving help to move breadcrumbs from right to left, they now overlap with product titles on desktop views for certain products.

The issue is visible in an attached screenshot showing the overlap problem. The user is seeking one of two solutions:

  • Make breadcrumbs display on two lines
  • Reposition the product title lower to avoid the overlap

The problem appears to be desktop-specific and doesn’t affect mobile views. A specific product URL has been provided for troubleshooting reference.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

We recently got some help here to move our websites breadcrumbs from the right hand side to the left.

Unfortunately now on some products, the breadcrumbs overlap the product title when viewing from the desktop only (please see image below). If anyone could help by either 2 lines of breadcrumbs or formatting the product title lower that would be so so appreciated.

image
image1520×681 174 KB

Theme: Palo Alto

Website link: La Pavoni Cellini Evoluzione RT V2 Coffee Machine - BEST AU DEALS – Prestige Coffee

Thank you in advance!

2 Likes
2

The result of bottom of the barrel work,
Just move the breadcrumbs to it’s own section to have a clear row break as a block element.
To fix this properly someone would need to actually work on the code and move things around in the file structure.

Trying to cram everything into the product area is a thing to be avoided.
Trying to fix this with just CSS would be a bad band-aid.

1 Like
3

Hello @MollieHammond ,

You can try this css

@media (min-width: 750px) {

h1.product__title {
margin-top: 40px;
}

}

4

Not understanding why the breadcrumb is only in the Product Details section. It should be a section itself, and you put it in all pages. The way it is now, it’s only on product pages, and it’s too far to the left and is being cut off. Should be its own section with its own margins and padding.

Screenshot 2025-10-30 180630
Screenshot 2025-10-30 180630558×488 23.3 KB

I would completely remove it, and find a free breadcrumb section online. Tons and Tons of free stuff.

Here’s an example of a youtuber giving a free breadcrumb https://www.youtube.com/watch?v=xue6ePgO02Y

Here’s someone who sells an SEO friendly breadcrumb section https://www.youtube.com/watch?v=HLMpcCkpkG0

1 Like
5

Either is’ been hardcoded in the wrong place, it’s in a custom-liquid block, or the HTML is malformed.
etc etc etc.

Guleria was nice enough to provide CSS band-aid but the problems still gonna be there, and if this is the process being used for changing the theme there’s probably other issues.

Good Luck.

1 Like
6

Agree the process/method he used is wrong and probably makes other issues.

7

Thanks Paul. It was a suggestion given here and without knowing how to put it in, it turned out bad. I’ve now removed the code provided and returned it back to it’s prior state to get it not overlapping for now while I look at putting it in it’s own section.

2 Likes
8

It was a ‘Shopify Partner’ who provided the original method so that’s reassuring. I’ve just removed what they told me to do entirely.

9

Unfortunately, everyone can become a Shopify partner. Previously, there were also “Experts” but not anymore. So I do not show my partner badge …

If a “partner” approaches you it may worth it to check their Shopify partners directory listing for reviews of their actual paid work. Some are even local :slight_smile:

2 Likes
10

Or the partners forums contributions, the partner directory probably isn’t qualitative anymore as the new tier system makes it seem like it’s now a gamed measurement of who can spam for collab pincodes to associate merchant revenue to accounts without any actual merit.

Generally don’t just work or use the work of those, or “ai”, that tell you what you want to hear.

11

Hi @MollieHammond,

It looks like the breadcrumbs are overlapping your product title, that’s an easy fix! You’ve got two options below:

Option 1 – Quick CSS fix

Try this code:

@media (min-width: 750px) {
  h1.product__title {
    margin-top: 50px !important;
  }
}

Option 2 – Use Tapita’s free breadcrumb section (no code)

If you prefer a clean, automatic layout that fits your theme spacing, you can use our free breadcrumb section:

  1. App: Tapita: AI Sections & Blocks
  2. Demo breadcrumb section: Tapita Breadcrumb (free)
  3. Guide: How to customize the breadcrumb

image
image1920×937 101 KB

Once added, you can:

  • :white_check_mark: Adjust spacing above/below the breadcrumb

  • :artist_palette: Change text color, size, and alignment (left/center/right)

  • :compass: Control link separators (›, /, or custom symbols)

  • :mobile_phone: Preview changes live for both desktop and mobile

image
image1000×622 16.2 KB

Hope this helps your page look perfect again :hot_beverage:
— Sophia | The Tapita Team