Search bar page navigation color

Store Design
1

trying to change this bar to match background color clicking on it gives no options im talking about where it says home>search 0 results found

Screenshot (10)
Screenshot (10)1608Ă—836 141 KB

2

Hi @hdrider1776,

That bar is your breadcrumb background (the “Home > Search 0 results found” area). Most Shopify themes don’t give a direct setting for this, but you can easily match it to your background with a little CSS.

Go to Online Store → Themes → Edit code → Assets → base.css (or theme.css) and add:

.breadcrumb,
.breadcrumb a {
  background-color: #ffffff !important; /* change #ffffff to your page background color */
  color: #000000; /* optional: set link/text color */
}

If your theme uses a different class, right-click the bar in your browser → Inspect → copy the exact class name, and apply the same CSS rule.

That’ll blend the bar perfectly into your store’s background.

If you’d like, I can help tweak the styling further so the bar looks seamless across desktop and mobile.

4

that worked i cant find in the css where to get rid of the white squares where my cursor is pointing to make the breadcrumb background full width

Screenshot (12)
Screenshot (12)1920Ă—977 173 KB

5

Hi @hdrider1776

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

6

Hi,

Good morning,

Welcome to the shopify ,

Please share your store URL and if your store is password protected then also provide password too.
Thank you.

7

This element has transparent background and would show whatever is selected in “Theme Settings”=> “Colors”=> “Theme background color”.

No need for code.

8

hi @hdrider1776

It looks like the white squares are caused by the breadcrumb container being restricted by the theme’s .page-width or .container class. To make the breadcrumb background span full width, you can add something like this to your theme’s CSS file:

.breadcrumb {
   background-color: #f5f5f5; /* adjust as needed */
   width: 100%;
}

.breadcrumb .page-width,
.breadcrumb .container {
   max-width: 100% !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
}

That should remove the white blocks and let your background stretch edge-to-edge. Theme setups can differ, so the exact class names may vary — I’d be happy to take a closer look and adjust it properly if needed.

Feel free to send me a direct message here and I’ll guide you further.