7 Replies Latest reply on Feb 8, 2018 10:34 AM by r_tist

    link a logo via div

    r_tist Level 1

      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!

        • 1. Re: link a logo via div
          WolfShade Level 4

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

           

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

           

          V/r,

           

          ^ _ ^

          1 person found this helpful
          • 2. Re: link a logo via div
            BenPleysier Adobe Community Professional & MVP

            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">

             

            1 person found this helpful
            • 3. Re: link a logo via div
              r_tist Level 1

              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.

              • 4. Re: link a logo via div
                WolfShade Level 4

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

                 

                V/r,

                 

                ^ _ ^

                • 5. Re: link a logo via div
                  r_tist Level 1

                  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?

                  • 6. Re: link a logo via div
                    Jon Fritz II Adobe Community Professional & MVP

                    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.

                    2 people found this helpful
                    • 7. Re: link a logo via div
                      r_tist Level 1

                      Genius! - YES, it worked!

                       

                      Thank you!