I seem to be having a problem with the Twitter Bootstrap navbar-collapse element overlapping the navbar-header logo, 'the alpha', and causing the link to be unclickable.
As shown in the image below, the alpha logo has an href link but is not clickable because the div.navbar-collapse is overlapping it.
You can view the live website at:
<div class="navbar navbar-default nav-show" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-lg"></i>
<i class="fa fa-times fa-lg" style="display:none;"></i>
</button>
<a class="navbar-brand" href="#viewer"><span class="logo">α</span></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#manifesto">Manifesto</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Can anyone help me figure out the issue here?