How do I make Logo clickable?

  • Resolved RipRapRob

    (@ripraprob)


    17 years, 6 months ago

    Look at https://www.rob.dk

    I would linke the logo in the top left corner to be clickable (linking to the front page, like the “Rob’s W?bsait” text to the left of it).

    Here is the relevant part of my Header:

    <div id="header">
      <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
      <div class="description"><?php bloginfo('description'); ?></div>
      <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    </div><!-- /header -->

    And here is the relevant part of my CSS:

    #header {
	height: 125px;
	background: url('images/rob_logo.jpg') no-repeat top left;
        display:block;
	}

    I know part of the problem is, that the IMG is a background image, and I think the solution is SOMETHING like this:

    <div id="header">
      <h1><a href="<?php echo get_settings('home'); ?>">
[>>>>MY LOGO GRAPHIC HERE - BUT HOW? <<<<]
<?php bloginfo('name'); ?></a></h1>
      <div class="description"><?php bloginfo('description'); ?></div>
      <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    </div><!-- /header -->

    but whenever I tries something, it messes the page up.

    Any help appreciated.

    Thanks :o)

Viewing 2 replies - 1 through 2 (of 2 total)

  • Take the image back out of your header as a background and set it back in its own div next to the header. Float the image div – left.

    Link the image with <a href="<?php echo get_settings('home'); ?>">

    Margin your header from the left next to your image and reset your h1 and description back to left:10px

    Thread Starter RipRapRob

    (@ripraprob)

    Thank you SO much :o)

    I tried your solution, and it fixed the logo, but it messed up my design a bit.

    But then I added a “height: 125px” to my CSS, and now everything is 100% ok.

    Thanks again! :o)

    For others with similar problems, here are the things I’ve changed:

    I’ve changed the relevant part of the header to this:

    <div id="page">
  <div id="wrapper">
   <div id="logo">
     <img src="/wp-content/themes/i3theme-1-2/images/rob_logo.jpg" />
</div>
    <div id="header">
      <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
      <div class="description"><?php bloginfo('description'); ?></div>
      <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    </div><!-- /header -->

    And changed stylesheet to this:

    #header {
	height: 125px;
	}

#logo {
	height: 125px;
	float: left;
	}

    :o)

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How do I make Logo clickable?’ is closed to new replies.