make header image clickable

  • 1) i have done the research and tried many things…please don’t send me to ” designing headers ” = https://codex.www.ads-software.com/Designing_Headers#Making_the_Whole_Header_Clickable ??

    2) a very nice logo.png is on top of my blog and the default h1 is somewhere but not visible. i can see the descriptor below my logo.png and that is the desired position.

    3) i can’t make the logo.png clickable ( wanting it to go ” home ” )

    4) here is the code, all valid. anybody see anything i am missing????

    in HEADER.PHP
    was…

    <div id="masthead">
        <h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description">
	<?php bloginfo('description'); ?>
	</div>
</div>

<div class="description">
	<?php bloginfo('description'); ?>
	</div>

    changed to…

    `<div id=”masthead”>
    <h1><img src=”/images/image.png” alt=”domain” onclick=”location.href=’https://domain.com/&#8217;;” style=”cursor: pointer;” /></h1>

    </div>`

    in STYLE.CSS
    was…

    h1 {
font-size: 3em;
line-height: 1;
margin-bottom: 0.5em;
}

    changed to…

    h1 {
font-size: 3em;
line-height: 1;
margin-bottom: 0;   /* was 0.5em  9/19/08  */
}

    was…

    #masthead {
margin: 0;
text-align: left;
height: 55px;
width: 700px;
float: left;
}

    changed to…

    #masthead {
margin: 0;
text-align: left;
height: 55px;
width: 700px;
float: left;
background:url(images/domain.png) no-repeat;  /* new line 9/19/08  it worked but not clickable */
}

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter ronchicago

    (@ronchicago)

    yes! it works. here is new code…

    in HEADER.PHP

    <div id="masthead"><a href="https://www.domain.com" id="headerlink"></a>
</div>

    in STYLE.CSS

    #headerlink{  /*  clickable works!  11/21/08  */
display: block;
border-style: none;  /* black border in ff */
height: 55px;
width: 700px;
margin: 0;
}

    only small detail in FF is when i click on image i get a small border ( black dotted ) that i don’t get on other clickables.

    Thread Starter ronchicago

    (@ronchicago)

    someone told me to do the following…

    “I’d never really noticed it until you said something. After doing a little research it seems to be an accessibility feature built-in Firefox for the handicapped that can’t use a mouse, it allows them to see which link is highlighted. But if you want to just disable it on your top header link then you add this to your .headerlink class in your stylesheet outline-style: none;
    I would really recommend only disabling it on your header to leave your site as accessible as possible.”

    it works as stated above.

    This is easier. https://www.smemon.com/how-to-make-a-header-image-clickable-in-wordpress.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘make header image clickable’ is closed to new replies.