Breadcrumbs: Change color of background - Forum | JoomShaper
Solved General

Breadcrumbs: Change color of background

Asked by Rick Nelson 5 years ago Last activity 5 years ago

I had trouble finding a setting to change color of the breadcrumb background. Finally I found out that apparently this needs to be done in custom css to override the default. Without the CSS I do not believe it is possible. My goal was to have the original row color of grey shcnged to blend to my page (match) of #252525.

Accepted answer

Marked as the solution
Ofi Khan Staff
5 years ago

Hello Rick Nelson

Yes, you are right. Go to Template Options -> Custom Code -> Custom CSS and add your CSS. Sometimes you need to add !important to give the style priority over the default style.

.breadcrumb { 
    margin-bottom: 0 !important; 
    background-color: #252525 !important; 
}

Best regards

3 more replies

Oldest first Newest first Most helpful
Rick Nelson Asked this
5 years ago

I believe this is the sample Custom CSS that will work: (pick you color)

.breadcrumb {
margin-bottom: 0;
background-color: white;
}

What format if using the hex number?
Is it........

.breadcrumb {
margin-bottom: 0;
background-color: #252525;
}

Rick Nelson Asked this
5 years ago

This worked great.

I found that I needed to change the radius for it to seamlessly meet the body content so I added the radiusz code as seen here:

.breadcrumb {
margin-bottom: 0 !important;
background-color: #252525 !important;
border-radius: 0px !important;
}

The result is seen here: https://sportfish.fish

Thanks for the great help.

Ofi Khan Staff
5 years ago

You are welcome

Log in to reply.