I have a few anchor tags in my html that for some reason aren't working. As far as I can tell there is nothing wrong with the code so I am completely at a loss. Maybe I need a fresh pair of eyes to look it over to see if there is something obvious that I am missing? This website is not loaded onto a server yet but here is the code I am having issues with.
<div id="navigation">
<div class="wrapper">
<div class="right">
<div class="phone-number">
<p>24hr Turn Around Time 1-877-229-9665</p>
</div>
<div class="social-media">
<a href="https://www.facebook.com/archfitters" target="blank"><img src="images/facebook.png"></a>
<a href="https://twitter.com/archfitters" target="blank"><img src="images/twitter.png"></a>
<a href="http://www.yelp.com/biz/arch-fitters-portland-4" target="blank"><img src="images/yelp.png"></a>
</div>
</div>
<div class="left">
<div class="logo">
<a href="/"><img src="images/logo.png"></a>
</div>
<div class="text">
<p>Custom Made Orthotics</p>
</div>
</div>
<div class="navbar">
<nav>
<a href="index.html">HOME</a>
<a href="services.html">SERVICES</a>
<a href="company.html">COMPANY</a>
<a href="contactus.html">CONTACT US</a>
<a href="news.html">NEWS</a>
</nav>
</div>
<div class="clear"></div>
</div>
</div>
#header {
font-family: calibri;
}
.text {
text-align:left;
font-size: 20px;
}
.navbar {
text-align: center;
font-color: #000000;
padding: 30px 20px 4px;
}
.phone-number {
text-align: right;
}
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #000000;
height: 80px;
padding-top: 5px;
background-color: #ffffff;
z-index: 1;
}
#navigation a {
font-size: 20px;
padding-left: 5px;
padding-right: 15px;
color: #000000;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
.social-media {
text-align: right;
margin-top: 40px;
}
Ok so I had a co-worker fix this issue. changed the position to relative and added a z-index of 20. Now they are working!