Solved

Image Map in WordPress Header

Posted on 2014-11-13
4
516 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
PHP extract HTML using DOMXpath from nested tables 8 47
CSS Question 5 38
iframe detection of parent window scale 20 59
CSS Position not returning 2 46
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

932 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now