Image Map in WordPress Header

domgarofalo
domgarofalo used Ask the Experts™
on
I have the following site:

http://breezyhillcamp.com/

I put the FaceBook logo there to link to the FaceBook page for this business, but I had to do it as part of the image for the entire header.

In order to get the link to work I tried doing an image map and that didn't work. So I created a div and the div is serving as the hyperlink and it's positioned absolutely. However, it shows up in a different spot for each browser. How do I fix it so the position is the same for every browser? Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2015

Commented:
Do you have a child theme created for your theme?
Top Expert 2015
Commented:
I would suggest modifying your header.php file to get the link inside the header. I highly recommend creating a child-theme first. If you don't and the theme you are using requires an update, the change to the header.php file will be lost in the upgrade.

More information about child themes: http://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial

Remove the widget you created in your previous attempt.

I'm assuming you have not made other changes to your header.php file already.

Open your header.php file in your favorite editor and make the changes in bold below. You will find the header.php file inside your theme folder (<root>/wp-content/themes/Contango/header.php). If you have a child theme, open or create a header.php file in your child theme folder that is initially a copy of the original header.php file then add the lines in bold below.

<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="wrapper hfeed site">  
  
  <header id="masthead" class="site-header" role="banner">
    <div class="container_16 clearfix">
      <div class="grid_16"[b] style="position:relative"[/b]>
        <?php get_template_part( 'custom', 'header' ); ?>
        [b]<div style="position: absolute; top: 17px; left: 830px;">
			<a id="box-link" href="#">
				<div style="width: 91px; height: 91px; background-color: transparent"></div>
		    </a>
        </div>[/b]
      </div>
    </div>     
  </header><!-- #masthead -->
  
  
  <div class="container_16 clearfix">
    <nav id="site-navigation" class="grid_16 main-navigation" role="navigation">
      <?php get_template_part( 'primary', 'menu' ); ?>
    </nav><!-- #site-navigation -->
  </div>

Open in new window


A better way would be to overlay the Facebook image on top of your header image rather than creating this linked div. I'm just picking up where you left off.

Add your Facebook url to the link.

Author

Commented:
You are a boss. Thank you!
Top Expert 2015

Commented:
You're welcome. Thanks for capping off my monthly points quota.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial