CODEWITHSUNDEEP
html
Kane
Kane

Reputation: 909

Hyperlink around image in HTML, but not clickable in browser

http://starterpad.com/blog/

<div id="logo">
    <a href="http://starterpad.com/blog/"><img src="http://starterpad.com/blog/wp-content/uploads/2014/11/copy-StarterPad-logo-new.png" height="61" width="321" alt="StarterPad Blog"></a>
</div>

As you can see, there's an <a href> tag around the <img> tag for the logo. But in a browser (tried several) the logo image isn't clickable.

Any ideas why not?

Upvotes: 0

Views: 64

Answers (4)

Kane
Kane

Reputation: 909

Turns out this WP plugin was the culprit: https://wordpress.org/plugins/contact-bank/

Deactivating it fixed the problem.

Upvotes: 0

infiniteloop
infiniteloop

Reputation: 885

It's clickable as when i tried it in jsfiddle so that means some layer overlapped your a link so that it's not clickable.

Below is the layer that overlapped with your logo div. 

<div class="collapse navbar-collapse navbar-ex1-collapse">
</div>

so the first fix is what all the above ppl have mentioned, using "pull-right" build-in class or over css with higher piority to re-align those layers to avoid overlapping.

another fix method is using z-index. i would suggest u add below attribute to set it to top so it's clickable

<div class="navbar-header" style="position: relative;z-index: 1;">

.........

Upvotes: 0

amamut
amamut

Reputation: 311

Looks like your div navbar is over the image so when your mouse is actually over the navbar. Add the "pull-right" class to your navbar and it should fix it.

<div class="collapse navbar-collapse navbar-ex1-collapse pull-right"></div>

Upvotes: 1

Sergey
Sergey

Reputation: 494

That's because the other div is on top of it. This guy

<div class="collapse navbar-collapse navbar-ex1-collapse">...</div>

It has something to do with the "display: table;" style set in bootstrap.min.css on line 6555. If you turn that one property off, the div becomes smaller and stops covering the logo.

Upvotes: 3

Related Questions