Title: Breadcrumb custom CSS Last modified: August 30, 2016 --- # Breadcrumb custom CSS * Resolved [Zodiac5](https://wordpress.org/support/users/zodiac5/) * (@zodiac5) * [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/) * Hello, is there any way to make css for breadcrumb on this theme? Something like this: [http://postimg.org/image/4u9ifp3nt/](http://postimg.org/image/4u9ifp3nt/) Viewing 12 replies - 1 through 12 (of 12 total) * [Sam](https://wordpress.org/support/users/soumendra/) * (@soumendra) * [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/#post-6799140) * Hello, * You can try this in your Custom CSS for Breadcrumb: * [https://wordpress.org/plugins/wordpress-seo/](https://wordpress.org/plugins/wordpress-seo/) * Thank you. * Thread Starter [Zodiac5](https://wordpress.org/support/users/zodiac5/) * (@zodiac5) * [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/#post-6799145) * Hello, thank you for your answer. I would like to add a css code to style.css if that’s possible. Like this one: [https://css-tricks.com/triangle-breadcrumbs/](https://css-tricks.com/triangle-breadcrumbs/) But I don’t know what exactly to add to look like example above. * [Sam](https://wordpress.org/support/users/soumendra/) * (@soumendra) * [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/#post-6799160) * Hello, * If you do as in the link you provide me then it will show the same Breadcrumb in all pages. * So you need to use the plugin i provide you and follow the instructions on this link: [http://kb.yoast.com/article/245-implement-wordpress-seo-breadcrumbs](http://kb.yoast.com/article/245-implement-wordpress-seo-breadcrumbs) * But if you want to add Breadcrumb in only one page you can try the link you provide me. * Thank you. * Thread Starter [Zodiac5](https://wordpress.org/support/users/zodiac5/) * (@zodiac5) * [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/#post-6799238) * Yes, I did that, but it still showing like this: [http://postimg.org/image/5oa07zg81/](http://postimg.org/image/5oa07zg81/) I want to look for example like this: [http://postimg.org/image/74liq4j4x/](http://postimg.org/image/74liq4j4x/) * [Sam](https://wordpress.org/support/users/soumendra/) * (@soumendra) * [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/#post-6799326) * Hello, * Can you please provide the link of both the sites whose screenshot you mentioned above. * Looking forward for your reply. * Thank you. * Thread Starter [Zodiac5](https://wordpress.org/support/users/zodiac5/) * (@zodiac5) * [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/#post-6799330) * Mine: [http://bijleskoning.nl/diensten/huiswerkbegeleiding/](http://bijleskoning.nl/diensten/huiswerkbegeleiding/) Other I want like this breadcrumbs: [https://www.bijlesnetwerk.nl/examentraining/kersttraining](https://www.bijlesnetwerk.nl/examentraining/kersttraining) * [Sam](https://wordpress.org/support/users/soumendra/) * (@soumendra) * [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/#post-6799360) * Hello, * First of all to remove the double arrows you need to go to your Dashboard > SEO > Advanced > Breadcrumbs > Separator between breadcrumbs , remove it from there and save the changes. * Then you can try this code in your Custom CSS for achieving that: * ``` .cont_nav_inner a:first-child::after { border-bottom: 25px solid transparent; border-left: 10px solid; border-top: 25px solid transparent; color: #015999; content: ""; left: 512px; position: absolute; top: -14px; } .cont_nav_inner a:first-child { background-color: #015999; color: #fff !important; font-size: 18px; font-weight: bold; padding: 14px; } .cont_nav_inner a + a::after { border-bottom: 25px solid transparent; border-left: 10px solid; border-top: 25px solid transparent; color: #087dd1; content: ""; position: absolute; right: 551px; top: -14px; } .cont_nav_inner a + a { background-color: #087dd1; color: #fff !important; font-size: 18px; font-weight: bold; padding: 14px; } .cont_nav_inner span::after { border-bottom: 25px solid transparent; border-left: 10px solid; border-top: 25px solid transparent; color: #0490f4; content: ""; position: absolute; right: 429px; top: -14px; } .cont_nav_inner span { background-color: #0490f4; color: #fff; font-size: 18px; font-weight: 500; padding: 14px; } ``` * You can adjust the values as per your requirement. * Hope that helps you, feel free to ask if there is any other problem. * Thank you. * Thread Starter [Zodiac5](https://wordpress.org/support/users/zodiac5/) * (@zodiac5) * [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/#post-6799369) * Hello, thanks for answer. Look, I don’t need SEO breadcrumbs because theme have own breadcrumbs. When I press customize, I can turn off and on that breadcrumbs. CSS file that you sent me is for that breadcrumbs and it’s good, but I need only to remove double arrows so it can look good. For now it looks like this: [http://postimg.org/image/njdnquttj/](http://postimg.org/image/njdnquttj/) * [Sam](https://wordpress.org/support/users/soumendra/) * (@soumendra) * [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/#post-6799373) * Hello, * If you want to use the themes default breadcrumb then please activate that and deactivate the SEO breadcrumb so that i can give you the CSS for that. * And if you want to remove the double arrow as i mentioned above you can go through your Dashboard > SEO > Advanced > Breadcrumbs > Separator between breadcrumbs, remove it from there and save the changes. * Thank you. * Thread Starter [Zodiac5](https://wordpress.org/support/users/zodiac5/) * (@zodiac5) * [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/#post-6799379) * Hey, like I told you before, the css that you gave me is for default breadcrumb. I already deactivated SEO breadcrumb, so the CSS that you gave me is working, but I just want to know how to remove double arrows from default breadcrumbs. Thanks * Thread Starter [Zodiac5](https://wordpress.org/support/users/zodiac5/) * (@zodiac5) * [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/#post-6799397) * Anything? * [Sam](https://wordpress.org/support/users/soumendra/) * (@soumendra) * [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/#post-6799399) * Hello, * Sorry for the misunderstanding. You can edit the themes core file to remove the double arrow from your breadcrumb. Or you can contact the theme author for better result. * Thank you. Viewing 12 replies - 1 through 12 (of 12 total) The topic ‘Breadcrumb custom CSS’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/invert-lite/1.0.17/screenshot. png) * Invert Lite * [Support Threads](https://wordpress.org/support/theme/invert-lite/) * [Active Topics](https://wordpress.org/support/theme/invert-lite/active/) * [Unresolved Topics](https://wordpress.org/support/theme/invert-lite/unresolved/) * [Reviews](https://wordpress.org/support/theme/invert-lite/reviews/) * 12 replies * 2 participants * Last reply from: [Sam](https://wordpress.org/support/users/soumendra/) * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/breadcrumb-custom-css/#post-6799399) * Status: resolved