當我向下滾動到第三個jumbotron時，導航欄不起作用

我的導航欄工作得很好，直到我滾動到我的頁面底部爲止。此時，我無法點擊導航欄中的任何內容，並且我的jumbotron上的文字與導航欄重疊。當我向下滾動到第三個jumbotron時，導航欄不起作用

<html lang="en"> 

    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="/Users/Pat/Downloads/bootstrap-3.3.2-dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="Website_Layout.css"> 
    <title>Home</title> 
    </head> 

    <body> 

    <div class="nav"> 
     <div class="container-fluid"> 
     <ul class="nav nav-pills"> 
      <li><a href="Website.html">Home</a></li> 
      <li><a href="Projects.html">Projects</a></li> 
      <li><a href="Team.html">Team</a></li> 
      <li><a href="Contact.html">Contact</a></li> 
     </ul> 
     </div> 
    </div> 

    <div class="jumbotron"> 
     <div class="container-fluid"> 
     <h1>hi</h1> 
     <p>hi</p> 
     </div> 
    </div> 

    <div class="fuel"> 
     <div class="container-fluid"> 
     <h1>hi</h1> 
     <p>hi</p> 
     </div> 
    </div> 

    <div class="learn-more"> 
     <div class="container-fluid"> 
      <div class="row"> 
      <div class="col-md-6"> 
       <h2>Development</h2> 
      <p>hi</p> 
      </div> 
      <div class="col-md-6"> 
       <h2>hi</h2> 
      <p>hi</p> 
      </div> 
      </div> 
     </div> 
    </div> 

    <div class="nav2"> 
     <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-3"> 
      <h1>hi</h1> 
      <p>hi</p> 
      <p>hi</p> 
      </div> 
      <div class="col-md-3"> 
      <h2>hi</h2> 
      <ul> 
       <li><a href="Projects.html">Projects</a></li> 
       <li><a href="Team.html">Team</a></li> 
       <li><a href="Contact.html">Contact</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 

    </body> 

</html>

這是我的css。

.nav { 
    width: 100%; 
    float: top; 
    position: fixed; 
    margin: 0 0 1em 0; 
    padding: 0; 
    background-color: black; 
    height: 60px; 
} 
.nav ul { 
    list-style: none; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

.nav li a { 
    display: block; 
    padding: 20px 20px; 
    color: white; 
    font-size: 16px; 
    text-transform: uppercase; 
} 

.nav li a:hover { 
    color: #FF6600; 
    background-color: white; 
    height: 60px; 
} 

.jumbotron { 
    background-image: url("/Users/Pat/Documents/Safron_Mountain.jpeg"); 
    height: 880px; 
    background-repeat: no-repeat; 
    background-size: cover; 
    margin-bottom: 0; 
} 

.jumbotron h1 { 
    font-size: 64px; 
    text-align: center; 
    color: #FF7F50; 
    text-shadow: -1.2px 0 black, 0 1.2px black, 1.2px 0 black, 0 -1.2px black; 
    font-weight: bold; 
    font-family: 'Shift',sans-serif; 
    padding-top: 15px; 
    padding-bottom: 20px; 
} 

.jumbotron p { 
    font-size: 26px; 
    font-weight: bold; 
    text-align: center; 
} 

.fuel { 
    height: 800px; 
    background-color: #FF7F50; 
} 

.fuel h1 { 
    text-align: center; 
    font-size: 68px; 
    padding-top: 200px; 
    padding-bottom: 50px; 
    color: white; 
    text-shadow: .3px .3px 0 #CCC, .6px .6px 0 #CCC, .9px .9px 0 #444, 1.2px 1.2px 0 #444, 1.5px 1.5px 0 #444, 1.8px 1.8px 0 #444; 
} 

.fuel p { 
    text-align: center; 
    font-size: 36px; 
    padding-left: 200px; 
    padding-right: 200px; 
    color: white; 
} 

.learn-more { 
    height: 800px; 
} 

.learn-more h2 { 
    text-align: center; 
    color: black; 
    font-size: 60px; 
    padding-top: 225px; 

} 

.learn-more p { 
    text-align: center; 
    color: black; 
    font-size: 32px; 
    padding-left: 50px; 
    padding-right: 50px; 
} 

.nav2 { 
    height: 150px; 
    background-image: url("/Users/Pat/Downloads/footer_lodyas/footer_lodyas.png"); 
} 

.nav2 h1 { 
    font-size: 18px; 
    padding-bottom: 0px; 
    font-weight: bold; 
    color: white; 
} 

.nav2 p { 
    color: white; 
} 

.nav2 ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.nav2 a { 
    color: white; 
    font-size: 14px; 

} 

.nav2 li a { 
    display: block; 
    padding: 5px 0px; 
    color: white; 
} 

.nav2 h2 { 
    font-size: 18px; 
    font-weight: bold; 
    color: white; 
}

感謝您的幫助！

來源

2015-02-06 Patrick Kearon

'浮動：最高;'是無效的。添加一個'z-index：1'到您的導航欄中，並且將修復它。另請參閱http://getbootstrap.com/components/#navbar-fixed-top – j08691 2015-02-06 17:35:13

嘗試把這個在你的.nav在CSS

.nav { 
    z-index: 100; 
}

來源

2015-02-06 17:32:49

它現在完美運作。非常感謝你！ – 2015-02-06 19:25:30

當我向下滾動到第三個jumbotron時，導航欄不起作用

回答

相關問題