Solved

Image Map in WordPress Header

Posted on 2014-11-13
4
566 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

728 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