Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Add Styles for Uncanny Owl Breadcrumbs Shortcode - [uo_breadcrumbs]
* By default, no styles are added to Uncanny Owl's breadcrumbs.
* They will inherit the styles of your theme.
* If you'd like to add styles for the [uo_breadcrumbs] shortcode,
* here's some CSS to help you with that.
* NOTE: These are simply examples. Update the values and/or add the
* styles that make sense for your setup.
* These styles should be copied & pasted to a child theme or the "Additional CSS"
* area of the WordPress Customizer.
/* Add space BELOW Uncanny Owl breadcrumbs */
.sfwd-breadcrumbs {
margin-bottom: 20px;
/* Add space ABOVE Uncanny Owl breadcrumbs */
.sfwd-breadcrumbs {
margin-top: 20px;
/* Add space ABOVE & BELOW Uncanny Owl breadcrumbs */
.sfwd-breadcrumbs {
margin: 20px 0;
/* Add a background or border to your breadcrumbs */
.sfwd-breadcrumbs {
padding: 8px;
background: #ededed;
border: 1px solid #ccc;
border-radius: 5px;
/* Add more space between the breadcrumb separators */
.sfwd-breadcrumbs .sep {
margin: 0 8px;
/* Change the style of the "Home" breadcrumb link */
.breadcrumb-trail > span:first-child {
font-weight: bold;
/* add other styles here */
/* Hide the "Home" breadcrumb link + the first separator.
* This will start your trail with your Dashboard/Profile link */
.breadcrumb-trail > span:first-child,
.breadcrumb-trail span:nth-of-type(2) {
display: none;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment