Problems applying styles in Breadcrumb NavXT plugin for WordPress

1 Views

I am having enormous problems applying my styles to the Breadcrumb NavXT plugin.

When I applied my styles in a html test document it looked fine: screenshot

Read More

When I applied the same styles (but adjusted to the plugin) in the WP document using the Breadcrumb NavXT plugin the best I could get it was this: screenshot

I have tried of the obvious answers like apply margin-right to the last-child by nothing is working. Would really be grateful for some help.

Here is the relevant html that WP is outputting: 

<div class="breadcrumb">

<!-- Breadcrumb NavXT 3.9.0 -->
<a title="Go to Home." href="http://localhost/media">Home</a> &gt; 
<a title="Go to Email & SMS Broadcasting." href="http://localhost/media/
email-sms-broadcasting/">Email & SMS Broadcasting</a> &gt; Track &   
Learn </div><!--END breadcrumb -->

Here is the relevant css: 

.breadcrumb{ list-style:none; overflow:hidden; position:absolute; font:10px     
 Helvetica,Arial,Sans-Serif; top:160px; float:left}
.breadcrumb a{ color:white;  text-decoration:none;  padding:2px 0 2px 35px;     
 background:blue; background:#728c8c; position:relative;  display:block; float:left}

.breadcrumb a:after{ content:"";  display:block;  width:0;  height:0;  
 border-top:50px solid transparent;   border-bottom:50px solid transparent;  border-  
 left:30px solid #728c8c;  position:absolute;  top:50%;  margin-top:-50px;  
 left:100%;  z-index:2}

.breadcrumb a:before{ content:"";  display:block;  width:0;  height:0;  border-  
 top:50px solid transparent;  border-bottom:50px solid transparent;  
 border-left:30px solid white;  position:absolute;  top:50%;  margin-top:-50px;   
 margin-left:1px;  left:100%;  z-index:1}

.breadcrumb a:first-child { padding-left:10px;}

.breadcrumb a:nth-child(2) {background: #768c72}
.breadcrumb a:nth-child(2):after{border-left-color:#768c72}
.breadcrumb a:nth-child(3) {background: #909673}
.breadcrumb a:nth-child(3):after{border-left-color:#909673}
.breadcrumb a:nth-child(4) {background: #ad7601}
.breadcrumb a:nth-child(4):after{border-left-color:#ad7601}
.breadcrumb a:nth-child(5) {background: #E3E8E8}
.breadcrumb a:nth-child(5):after{border-left-color:#E3E8E8}
.breadcrumb a:nth-child(6) {background: #728c8c}
.breadcrumb a:nth-child(6):after{border-left-color:#728c8c}
.breadcrumb a:nth-child(7) {background: #768c72}
.breadcrumb a:nth-child(7):after{border-left-color:#768c72}
.breadcrumb a:last-child a{background:transparent !important;  color:black;  
pointer-events:none; cursor:default;}

.breadcrumb a:hover{background:#526476}
.breadcrumb a:hover:after{border-left-color:#526476 !important}

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Sounds and looks as though the WP installation already has CSS styles for the class of “breadcrumb”. It’s a commonly used class name. To fix the problem, either rename the class to something more bespoke e.g. “thisIsMyBreadcrumb”.

    If that’s generated by the breadcrumb plugin and you don’t want to get into their PHP to change this (safeguarding future updates), you could wrap the breadcrumb class in your own div with an id or class and use this to be more specific in the CSS.

    e.g. all CSS declarations with this…

    .breadcrumb {}

    …is changed to this…

    #thisIsMyBreadcrumb .breadcrumb {}

    Assuming you introduce the HTML…

    <div id="thisIsMyBreadcrumb">
    // place your breadcrumb here
</div>

    The more specific declaration pointed at a bespoke named div will ensure the WP theme or base stylesheet does not cause conflicts – thus returning you to the rendering of these elements you have successfully generated in a static file away from WP.