Oddly enough, the links seem to be unclickable except when using Internet Explorer. I attempted adjusting the z-index and checked for conflicts multiple times, but unfortunately, it still won't cooperate. The issue seems to stem from the navigation bar, however, I am at a loss on how to resolve this.
The code is currently set as follows:
/* Navbar BG Big */
.image {
position: relative;
margin-right: auto;
margin-left: auto;
height: auto;
width: 100%; /* for IE 6 */
background-image: url(../images/headerbg.png);
background-repeat: repeat-x;
text-align: center;
}
/* Navbar BG Small */
@media all and (max-width: 1200px) {
.image {
background-image: url(../images/spacer.gif);
}
}
/* Logo Styles */
@media all and (max-width: 800px) {
#big-logo {
display: none;
position: relative;
z-index: -999;
}
}
@media all and (min-width: 800px) {
#small-logo {
display: none;
position: relative;
z-index: -998;
}
}
/* Small Nav */
@media all and (max-width: 900px) {
nav ul {
list-style-image: none;
list-style-type: none;
width: 100%;
position: absolute;
margin-bottom: 2em;
}
nav ul li {
display: inline;
text-align: center;
margin-right: .5em;
margin-left: .5em;
}
}
/* Big Nav */
@media all and (min-width: 900px) {
nav ul {
list-style-image: none;
list-style-type: none;
width: 100%;
position: absolute;
margin-bottom: 2em;
margin-top: .4em;
}
nav ul li {
display: inline;
text-align: center;
margin-right: 0.5em;
margin-left: 0.5em;
}
}
.navtext:link, .navtext:visited {
color: #FFFFFF;
text-decoration: none;
font-size: 1em;
text-shadow: 1px 1px 1px #333;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
display: inline-block;
letter-spacing: 0.2em;
margin-top: 0.5em;
margin-bottom: 0.5em;
padding-right: 2em;
font-style: normal;
}
.navtext:hover {
color: #FFFFFF;
text-shadow: 1px 1px 2px #00c4ff;
text-decoration: none;
}
HTML
<!-- logo & nav !-->
<div class="image">
<nav>
<ul>
<li><a href="#" class="navtext">Home</a></li>
<li><a href="#" class="navtext">About</a></li>
<li><a href="#" class="navtext">Services</a></li>
<li><a href="#" class="navtext">Portfolio</a></li>
<li><a href="#" class="navtext">Product</a></li>
<li><a href="#" class="navtext">Store</a></li>
<li><a href="#" class="navtext">Support</a></li>
<li><a href="#" class="navtext">Contact</a></li>
</ul>
<ul>
<li>
<div id="spacer"></div>
<!-- big logo !-->
<img src="images/headerlogo.png" alt="ETV Software" id="big-logo" border="0"/>
</li>
</ul>
</nav>
<!-- navdrop image here !-->
<img src="images/navdrop.png"/>
<!-- small logo !-->
<img src="images/headerlogo.png" alt="Etv Software" id="small-logo" border="0"/>
</div>