Breadcrumb Module – CSS Tutorial
In this video we show you how to add some custom css to make new effects in your Divi Breadcrumb Module.
We have made everything really easy by providing a screencast and the CSS Snippet used.
Follow along with this video from our youtube channel and you can replicate the common UI pattern for a Divi Breadcrumb Module.
The CSS Code
If you would like to copy the code mentioned in the screencast you can grab it from here from the GIST link or get it from the embed code below from the GIST we created.
Written Tutorial of Screencast
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.
To fix this, we need to write some custom CSS.
This is the look we want to achieve:
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.
Once the Theme Customiser is open, go to the Yoast SEO Settings. These settings allow you to change the breadcrumbs separator.
Change the separator to a forward slash (or whatever you like), and then click “Save and Publish”.
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.
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.
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.
Click “Save Changes”.
Now when you go back to your page and refresh it you will have the desired effect. And that’s it!
Adds a new clean header with breadcrumbs powered by the Yoast SEO plugin.
- Installation of Breadcrumb Module
- Breadcrumb Module - Getting Started
- Breadcrumb Module - Configuration
- Breadcrumb Module - Theme Customiser
- Breadcrumb Module - Layout Options
- Breadcrumb Module - Managing Titles
- Breadcrumb Module Options
- Breadcrumb Module – Shortcodes
- Breadcrumb Module – Padding Options
- Featured Image as Background
- ACF Field as Background
- Breadcrumb Learndash Snippet
- Breadcrumbs with Custom Post Types and Categories