Twitter Bootstrap navbar-collapse chevauchant navbar-header

Question

J'ai un problème avec le navstrap-navstraps Twitter Bootstrap chevauchant le logo de la barre d'en-tête «l'alpha» et empêchant le lien d'être cliquable.

voir l'image ci-dessous: alpha a un lien href mais n'est pas cliquable à cause de div.navbar-collapse chevauchement. Voici le lien vers le site en direct: http://alchuang.com/indexnav.html

<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> 

Ce qui semble être la question ici?

Answer 1

Il semble que deux éléments sur votre .navbar sont à l'origine du problème:

-webkit-perspective:1000 et -webkit-backface-visibility: hidden

Ce sont des éléments qui se rapportent à la transformation 3D d'objets sur la page - et en quelque sorte, ils déforment la zone cliquable sur votre logo

Ces styles ne semblent pas être utilisés sur la barre de navigation, et leur suppression de votre classe .navbar résoudra le problème.