Breadcrumb Custom CSS Tutorial Document

In this tutorial we show you how to add some custom css to style your Divi Breadcrumb Module.

When you install the Breadcrumbs Module there are some nuances that you need to know about.

In this example, we have a web page and the breadcrumb only shows the end of the breadcrumb, … > Contact, and not the starting point. It’s not that it’s not there, but it’s because the link colour of the text is the same as the background colour on the page.

Divi Breadcrumb Module CSS Tutorial - Screenshot 1

Divi Breadcrumb Module CSS Tutorial - Screenshot 2

To fix this, we need to write some custom CSS.

This is the look we want to achieve:

Divi Breadcrumb Module CSS Tutorial - Screenshot 3

Notice here the text is white, is slightly bolder and has some background shading behind it. The breadcrumb separator is also different – it uses a forward slash instead of arrows. I’m going to show you how to make these edits.

The first thing you need to do is edit the Yoast SEO settings, to be able to change the breadcrumbs separator. To do that, go to the Theme Customiser from your Dashboard.

Divi Breadcrumb Module CSS Tutorial - Screenshot 4

Once the Theme Customiser is open, go to the Yoast SEO Settings. These settings allow you to change the breadcrumbs separator.

Divi Breadcrumb Module CSS Tutorial - Screenshot 5

Change the separator to a forward slash (or whatever you like), and then click “Save and Publish”.

Divi Breadcrumb Module CSS Tutorial - Screenshot 6

That’s that part of the styling done.

Next you need to put some CSS into the page to deal with the text and background colour issue.

The CSS Code

If you would like to copy the code you can grab it from here from the GIST link or get it from the embed code below from the GIST we created.

First of all what I have done is set up a #breadcrumbs span, and a #breadcrumbs span a. That is for the breadcrumbs area to have it’s font weight and colour changed.

Divi Breadcrumb Module CSS Tutorial - Screenshot 7

Second is the first-child item, because the overall breadcrumbs area is wrapped in a span tag. I have put a background colour on that to suit this particular example, but you can change that to match your requirements. Then I have added some more padding around the item.

Divi Breadcrumb Module CSS Tutorial - Screenshot 8

If you want to use this snippet, you can change the colour of the font and the background to get a nice effect quite quickly.

Now you need to know where to paste the code. From the dashboard, go to Divi > Theme Options and click the “General” tab. Scroll down to the bottom of the page and paste the snippet in the “Custom CSS” box.

Divi Breadcrumb Module CSS Tutorial - Screenshot 9

Click “Save Changes”.

Now when you go back to your page and refresh it you will have the desired effect. And that’s it!

Divi Breadcrumb Module CSS Tutorial - Screenshot 3

We have a screencast of this example here.

30 day Money Back Guarantee

30 day Money Back Guarantee

If you aren't happy with our products, you get your money back. No questions asked.
Full Support on Every Product via our Helpdesk

Full Support on Every Product via our Helpdesk

Excellent documentation and dedicated support are all part of the service
Secure using Stripe and PayPal

Secure using Stripe and PayPal

We take your security seriously and have every page secured via SSL on our site.

We Offer both PayPal and Stripe for Payment.

Subscribe

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!