link a logo via div

[r_tist]

CSS-Tricks mentioned that to hyperlink your logo you can surround a div with the <a> tags.

<a href="http://example.com"> <div> anything </div> </a>

How would it work in this case?

<div class="col-sm-12 col-lg-12 clearfix">

       <a target="_blank" href="#"><div class="logo"><img src="images/logo.png" class="img-responsive" alt="Logo"></div></a>            

</div>

I tried this but it did not seem to work. I tried it on a local server for testing. Can you advise if something is incorrect here?

Thank you!

[WolfShade · Accepted solution]

Seems pretty straightforward.  No reason it shouldn't work.

<DIV>
    <A>
        <DIV>
            <img />
        </div>
    </a>
</div>

V/r,

^ _ ^

[BenPleysier]

Adding to WolfShade​ reply, you will have to replace the '#' in <a target="_blank" href="#"> with the destination such as

<a target="_blank" href="myPage.html"><div class="logo"><img src="images/logo.png" class="img-responsive" alt="Logo"></div></a> 

As a side note: Because Bootstrap 3+ is a mobile first framework it is not neccessar to add all of the classes as in <div class="col-sm-12 col-lg-12 clearfix">. You can remove the class for lg as in

<div class="col-sm-12 clearfix">

[r_tist]

I cannot get this specific use case to work:

<div class="col-sm-12 clearfix">

    <div class="logo">

     <a target="_blank" href="https://www.google.com"><img src="images/logo.png" class="img-responsive" alt="The Logo"></a>

     </div>

</div>

I just need the .png of logo to link out actively. As is, it does not work at all. Do the <a> tags get pulled out and surround the logo div class instead?

Thank you.

[WolfShade]

No.  Unless there is some extenuating circumstance, the code you provided should work.  What, precisely, isn't working?

V/r,

^ _ ^

[r_tist]

OK, I see what's happening here.

Within same overall header, there is this immediately after the code container that houses logo, and it overlaps the logo so is blocking out the logo link capability. What's below represents the navicon menu control that comes into play when screen is collapsed.

<div id="headerToggle" class="header-bottom">

            <div class="container">

            <div class="row">

             <div class="col-sm-4">

              <div class="navbar-header">

                <a class="navbar-toggle" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">

                 <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

                 </a>

</div> </div> </div></div></div>

**I tried adding z-index: 9999 !important;  to the div called 'logo' to try to force it to be "top dog". This did not work.

Any other ideas?

[Jon Fritz]

z-index only works on items that are positioned via css.

Since you have elements overlapping, I'll assume that at least one of them has position:absolute in its css. The other element, I'd be willing to bet, doesn't have any positioning setting at all, which would cause z-index to fail.

You can add position:relative to the non-positioned element, then z-index settings will function.

[r_tist]

Genius! - YES, it worked!

Thank you!