I have an image link map in the header of my wordpress theme that I need to make responsive under 750px. I have been able to make the links show up in the header but they aren't active and I'm not sure why. Right now I'm just trying to get the "p1" link to work.
site is here: indie-scene.com
Here is my php:
<div class="header header-default">
<img src="<?php echo $ti_option['site_logo']['url']; ?>" alt="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>" width="<?php echo $ti_option['site_logo']['width']; ?>" height="<?php echo $ti_option['site_logo']['height']; ?>" />
<div class="hotspots">
<a href="http://www.nearlynewlywed.com" class="p1"></a>
<div title="home">
<a href="http://www.indie-scene.com" class="p2"></a>
</div>
<div title="sell">
<a href="http://www.nearlynewlywed.com/a/sell" class="p3"></a>
</div>
</div>
</a><!-- Logo -->
and my media query in css
@media only screen and (max-width: 750px) {
.header {
width:100%;
}
.header img {
content: url(http://indie-scene.com/wp-content/uploads/2014/10/logo_no_banner.png);
max-width: 276px;
}
.header {width:100%; position:relative; }
.header .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}
.header a {display:block; position:absolute; background:#000; z-index:100; opacity:0.2; filter: alpha(opacity=20); border:1px solid transparent; }
.header a.p1 {left:50%; top:5%; width:50%; height:50%;}