Introduction

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.

Changing Link Color

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

Change Breadcrumb Separator

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.

Text And Background Colour

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.

Get access to all our themes and plugins

Trusted by over 1000+ websites

Become a member to use our themes & plugins for an unlimited number of sites. No restrictions!

30-day money-back guarantee.

Not satisfied? Your money back, no questions asked.

Subscribe

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

You have Successfully Subscribed!