[resolved] Clickable Header (9 posts)

  1. CKS
    Posted 7 years ago #

    So I've read some info on the forums about making header background images clickable (links to outside of WordPress). The trouble is that I don't even know enough CSS/HTML to do it on my own. I'm learning quickly though.

    my site is http://www.cksblog.com
    I'm using the Modmat template...Here's the header CSS:

    /* page header */
    div#header{text-align:left;height: 104px; background: url('headers/defaultheader.gif') no-repeat right top; background-color: #000; border-left: 2px solid black; border-right: 2px solid black; border-top: 2px solid black;}
    div#blog-description{color: #FFF; margin: 0 0 0 15px;}

    Here's the header.PHP file:

    <div id="wrapper" class="hfeed">

    <div id="header"<?php modmatHeaderImage(); ?>>

    <h1 class="blog-title">/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name') ?></h1>
    <div id="blog-description"><?php bloginfo('description') ?></div>
    </div><!-- #header -->

    What's the easiest way to go about making the header clickable?

    I know that this has been posted before, I am just confused and am not sure where to go to find more help...

    thanks in advance to whoever helps dig me out of this hole,

  2. moshu
    Posted 7 years ago #

    It has been posted a million times. Search for exactly that: "clickable headers"

  3. ChristineB
    Posted 7 years ago #

    I tried that and wasted a LOT of time reading again and again that I should search, with one post stating that I should read the 99 search results. How helpful - NOT!

    A better start is here:


    This seems to work to make the entire header clickable:

    <div id="header"<?php modmatHeaderImage(); ?> onclick="location.href='http://siteaddress/';" style="cursor: pointer;">>

    Is there a site where I can get WP support without being insulted at a membership forum? I'll be glad to pay a few bucks.

  4. taeran
    Posted 7 years ago #

    Christine - I agree with your comments...

    I also use modmat, and found a solution (I think) by bypassing the modmatheaderimage call in header.php

    Here are snips from my header.php and style.css that made things work quite well...

    <div id="header" onclick="location.href='http://www.willitchangeyou.com/';" style="cursor: pointer;">

    /* page header */
    div#header{text-align:left;height: 104px; background: url('http://www.webpagegoeshere.com/header.jpg') no-repeat left top; background-color: #000; border-left: 15px solid black; border-right: 2px solid black; border-top: 2px solid black; border-bottom: 15px solid black;}

    - Ross

  5. michaeljphall
    Posted 7 years ago #

    My problem stems from this onclick event rendering my search bar inoperable. The onclick event works perfectly, but because the search bar is included in the "header" attempting to input text in the search will simply return the user to "home."

    I think I may need to define an area for this onclick event, but... i don't know how.


  6. marklaflamme
    Posted 7 years ago #

    The always helpful moshu. If you were on fire and asked him for help, he'd direct you to a fire safety website.

  7. Fberheim
    Posted 7 years ago #

    FINALLY ! ! ! !

    Clickable header!

    I have been searching for days, and tried tons of different codes i my design!

    Finally a genius came up with a simple way, and code:

    Place this code in your Header.php
    I placed it right below the </head>:

    <div id="header" onclick="location.href='http://www.YourSite.com/';" style="cursor: pointer;">



  8. Gene53
    Posted 7 years ago #

    Hey, thanks, exactly what I was looking for.

    You may also change:

    <?php echo get_option('home'); ?>/

  9. elitesalesgroup
    Posted 7 years ago #

    Thank you for sharing this extremely useful bit of information.

Topic Closed

This topic has been closed to new replies.

About this Topic