Solved

Image Map in WordPress Header

Posted on 2014-11-13
4
533 Views
Last Modified: 2014-11-24
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!
0
Comment
Question by:domgarofalo
  • 3
4 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40440213
Do you have a child theme created for your theme?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40440295
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.
0
 

Author Comment

by:domgarofalo
ID: 40440885
You are a boss. Thank you!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40441097
You're welcome. Thanks for capping off my monthly points quota.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Diminish Pop-up  in 3 seconds 7 47
2 separate CSS animations 2 16
Search Item in Table 2 19
html / css issue / div issue. stuck, help needed 2 14
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question