Different style being pulled for link attached to image, causing unwanted layers

I need to update a highly-customized WP website to add a SecureTrust logo and link on the site in a specific location beside other certified seals in the footer.

I attempted to insert the JavaScript into the footer.php but it didn’t work/wasn’t recognized. As a work around I edited the style css to show the SecureTrust logo and then added an anchor in the html to place the link.

<div class="logo-box"> 
   <span class="example1"></span>
   <span class="iata"></span>
   <span class="securetrust">
      <a href="https://certs.securetrust.com/" target="_blank" rel="noopener" title="SecureTrust"><img src="https://companyname/wp-content/uploads/2020/08/tc-seal-blue46.png"></a></span>
</div>

.securetrust{
    text-indent: -999999px;
    background: url(images/tc-seal-blue46.png) no-repeat scroll left top rgba(0, 0, 0, 0);
    background-size: contain;
    display: inline-block;
    height: 46px;
    width: 100%;
    margin-left: 8px;
    max-width: 93px;
}

The SecureTrust logo is now in place, however the “link” is connecting to a media style and pulling up the site logo, not the .securetrust style in the css. Images are attached if it helps.

Is there a way to have the link pull the css image? I have also tried uploading the image separately and direct the a href to pull that but it’s not working.

Answer

The logo class on the parent div is causing the problem, so either get rid of that or if you need to keep it for some reason, try the following.

You need a class that will override the site logo class. So use .logo .securetrust as you css selector rather than just .securetrust and put it securetrust on the link rather than the span.

HTML

<div class="logo col-md-6 col-sm-12"> <!-- <- logo is problem class -->
  <div class="logo-box">
    <span>
      <a href="sealserver.trustwave.com/…" class="securetrust" target="_blank" rel="noopener" title="SecureTrust">
        <img src="worldgo.ca/wp-content/uploads/2020/08/…>
      </a>
    </span>

CSS

// to hide the site logo
.logo .securetrust {
  background: none;
}
// set the size and alignment of the image as required
.logo .securetrust img {
  width: 70px;
  vertical-align: top;
}

Advertisement

Answer