divをオーバーラップしてリンクを解除する

Question

私の問題は、ブートストラップ "navbar"を持つdivクラスが自分のmd-12 divをオーバーラップさせていますが、コンテンツは表示されますがクリックできないことです。私はこのことが起こるかどうか知りません。

DEMO：https://elevarbetensys.se/SY15/MS15/GYARB/index.php

質問：どのように私はそれをクリック可能にすることができ、 "削除" または変更します。私のロゴとlanguageselectorは今クリックできません。

<div class="container text-center"> 
    <div class="row"> 
    <div id="home"> 
    </div> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float: left;"> 
      <h6>This restaurant is educational purpose<br>All orders will be considered as donations.</h6> 
     </div> 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float: left;"> 
      <a href="#home"> 
       <img class="navbar" src="images/Burning_Rooster.png" alt="Burning_Rooster"> 
      </a> 
      <p>RESTAURANT & LOUNGE BAR</p> 
     </div> 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float: left;"> 
      <ul class="languagepicker roundborders large navbar-right"> 
       <a href="#en"><li><img src="images/flags/us.png"/>English</li></a> 
       <a href="#nl"><li><img src="images/flags/nl.png"/>Nederlands</li></a> 
       <a href="#de"><li><img src="images/flags/de.png"/>German</li></a> 
       <a href="#fr"><li><img src="images/flags/fr.png"/>Français</li></a> 
       <a href="#es"><li><img src="images/flags/es.png"/>Español</li></a> 
       <a href="#it"><li><img src="images/flags/it.png"/>Italiano</li></a> 
       <a href="#it"><li><img src="images/flags/se.png"/>Svenska</li></a> 
      </ul> 
     </div> 
    </div> 
    <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
        <i class="fa fa-bars" aria-hidden="true" style="font-size:24px;"></i> 
       </button> 
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav"> 
        <li> 
         <a href="#home" onClick="gaq.push(('_trackPageview', 'home'))" class="hvr-underline-from-center">HOME</a> 
        </li> 
        <li> 
         <a href="#menu" onClick="gaq.push(('_trackPageview', 'menu'))" class="hvr-underline-from-center">MENU</a> 
        </li> 
        <li> 
         <a href="#gallery" onClick="gaq.push(('_trackPageview', 'gallery'))" class="hvr-underline-from-center">GALLERY</a> 
        <li> 
         <a href="#reservation" onClick="gaq.push(('_trackPageview', 'reservation'))" class="hvr-underline-from-center">RESERVATION</a> 
        </li> 
        <li> 
         <a href="#review" onClick="gaq.push(('_trackPageview', 'review'))" class="hvr-underline-from-center">REVIEWS</a> 
        </li> 
        <li> 
         <a href="#contact" onClick="gaq.push(('_trackPageview', 'contact'))" class="hvr-underline-from-center">CONTACT</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
    <img src="images/restaurant/welcome.jpg" alt="Welcome" class="img-responsive img-rounded"> 
    <h2>Burning Rooster Since 1969</h2> 
     <p>14 February 1969, was the year evertying came to place. Our service have been running since. 
     <br> 
     At our restaurant we serve you the finest food and desserts. Burning Rooster became popular immediatly with our rooster delicacy. 
     <br> 
     People across the whole world came to taste our finest rooster meny. Our meny have gave pleasure to world famous humans like 
     <br> 
     Freddy Mercury, Mel Gibson, Kiss and Donald duck creator. 
     </p> 
     <hr> 
    </div> 
</div> 

CSS：

#home { 
    height: auto; 
    margin-right: auto; 
    margin-left: auto; 
    width: auto; 
    text-align: center; 

}

.languagepicker { 
    background-color: #FFF; 
    display: inline-block; 
    padding: 0; 
    height: 40px; 
    overflow: hidden; 
    transition: all .3s ease; 
    margin: 0 0 10px 0; 
    vertical-align: top; 
    float: left; 
} 

.languagepicker:hover { 
    /* don't forget the 1px border */ 
    height: 81px; 
} 

.languagepicker a{ 
    color: #000; 
    text-decoration: none; 
    font-size: 16px; 
} 

.languagepicker li { 
    display: block; 
    padding: 0px 20px; 
    line-height: 40px; 
    border-top: 1px solid #EEE; 
} 

.languagepicker li:hover{ 
    background-color: #EEE; 
} 

.languagepicker a:first-child li { 
    border: none; 
    background: #FFF !important; 
} 

.languagepicker li img { 
    margin-right: 5px; 
} 

.roundborders { 
    border-radius: 5px; 
} 

.large:hover { 
    /* 
    don't forget the 1px border! 
    The first language is 40px heigh, 
    the others are 41px 
    */ 
    height: 286px; 
} 

Answer 1

まず、あなたはできるだけ早くあなたがそれを作成すると、あなたの#homeを閉じている：<div id="home"></div>。

第2に、相対的なnavbarのpositionプロパティをオーバーライドするだけです。 navが#homeの子であると仮定すると、次のことを試してください。

#home > nav { 
    position: inherit; 
}