WordPress.org

Ready to get started?Download WordPress

Forums

Tonic
Making the header image a link to the home page (4 posts)

  1. geekosupremo
    Member
    Posted 8 months ago #

    I've tried the solutions in this post, and neither of them is accomplishing what I'm trying to do, which is just turn to whole banner image into a clickable link back to the home page. What am I missing?

    Line 45 of my header.php looks like this
    <a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="path" alt="<?php bloginfo( 'name' ); ?>" /></a>

  2. Jesin A
    Member
    Posted 8 months ago #

    Post your site's link for us to see.

  3. geekosupremo
    Member
    Posted 8 months ago #

    Right, sorry, forgot that.

    The site is: http://www.beeskneescaramels.com/

    Currently there is a menu up in the header image, but it doesn't really fit the look we're going for, thus we were wanting to make the banner image the "home" link.

    Thanks for looking.

  4. Jesin A
    Member
    Posted 8 months ago #

    You're using a background image, so the solution mentioned in that post won't work as the theme places line 45 a class named "remove".

    There are two ways of doing it. First revert the changes you've made.

    http://themes.svn.wordpress.org/tonic/1.0.8.1/header.php

    JavaScript:
    Edit header.php and change line 31 from

    <div id="header-wrap" class="grid wfull">

    to

    <div id="header-wrap" class="grid wfull" onclick="location.href='<?php echo esc_url( home_url() ); ?>'" style="cursor:pointer">

    Pros:
    The entire banner becomes clickable just as you wanted.
    Cons:
    Needs JavaScript enabled to work

    CSS:
    Edit header.php and place the following on line 62

    <a class="click-div" href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"></a>

    Then use the following CSS

    a.click-div {
      height: 100%;
      position: absolute;
      text-decoration: none;
      width: 100%;
    }

    Pros:
    Uses only CSS
    Cons:
    The region above and next to the menu aren't clickable.

Reply

You must log in to post.

About this Theme

About this Topic