It seems that on my website header, a transparent region of my ribbon seems to be blocking me from clicking a link on one of my buttons.
The z-index of my ribbon is 100 so I thought it should be right at the back. How can I solve this?
Here is my website
http://www.thejobshow.com
The button in regard is the ‘book a stand’ button on right.
Can anyone suggest a fix?
/* MASTHEAD */
#masthead-main-area {
width:100%;
position:relative;
height:288px;
}
#masthead-main-area #logo {
position:absolute;
top:50px;
left:54px;
width:393px;
height:199px;
}
#masthead-main-area #man {
position:absolute;
top:2px;
right:0px;
}
#masthead-main-area #action_panel {
position:absolute;
top:54px;
right:134px;
width:350px;
height:198px;
overflow:hidden;
text-align:center;
}
.text_welcome {
color:#00a2d5;
font-size:26px;
}
.text_strapline {
color:#00a2d5;
font-size:20px;
padding-top:8px;
font-style:italic;
}
.ribbon {
position:absolute;
right:0px;
bottom:0px;
width:225px;
height:227px;
z-index:100;
background:url(/wp-content/uploads/national-business-awards-2015.png) no-repeat top left;
}
a.circle_button {
display:block;
width:93px;
height:61px;
text-align:center;
color:#00a2d5;
background:url(images/circle-buttons.png) no-repeat left center;
text-decoration:none;
float:left;
margin-top:16px;
padding-top:32px;
margin-right:20px;
}
a.circle_button:hover{
background:url(images/circle-buttons.png) no-repeat right center;
color:#fff;
}
#masthead_bottom_border {
width:100%;
height:8px;
background:url(images/masthead-bottom-border.png) repeat-x;
}
