Solved

Image Map in WordPress Header

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

777 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