Solution 1 :

One way is to wrap the whole header thing to an anchor tag with an href attribute

<a href="url of the site">
<div class="header">
    <div class="container">
        <h1>
            <span id="ctl05_orgName">Our Company</span></h1>
    </div>
</div>
</a>

other way is handle the hiding of text and handle the click event via JQuery

$(document).ready( function() {

   // wait for page to load
    ///hide the header
    $("#ctl05_orgName").hide()
    //header click handler
    $("div.header").click( function (){ 
     window.open('http://www.google.com', '_blank'); 
    })
});

Problem :

The HTML for the site pulls the organization name from the database into the header. I used CSS to hide the organization name and then displayed the logo instead. I want the logo to be linked back to the homepage. The source HTML for the page:

<div class="header">
    <div class="container">
        <h1>
            <span id="ctl05_orgName">Our Company</span></h1>
    </div>
</div>

This CSS has added the company logo:

<style>
#ctl05_orgName {
display: none;
}

.header {
background-color: #4e505d;
border: 6px solid #4e505d;
background-image: url('https://www.logoimage.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
</style>

I have seen that it is possible to make a div clickable and have tried to add javascript to do that both for the div and for the span that originally displayed the company name. I am missing something as neither of these have hyperlinked the logo or div.header:

$("div.header").click(function() {window.location = https://.../;});

$("span[id$=orgName").click(function() {window.location = https://.../;});

How do I do this or is there a better way to remove the orgName, add the logo via url and make the logo hyperlinked? Thank you.

Comments

Comment posted by ilkerkaran

why don’t you use

Comment posted by Sukima

Please don’t make a div “clickable” this breaks semantic HTML and makes accessibility near impossible.

Comment posted by ccllraabla

I would like to use the

By

Leave a Reply

Your email address will not be published. Required fields are marked *