Breadcrumbs: Change Color Of Background - Question | JoomShaper

Breadcrumbs: Change Color Of Background

RN

Rick Nelson

General 3 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.

0
4 Answers
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 years ago #7909

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

1
RN
Rick Nelson
Accepted Answer
3 years ago #7907

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; }

0
RN
Rick Nelson
Accepted Answer
3 years ago #7939

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.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 years ago #7954

You are welcome

1