無法添加更多指向導航的鏈接

Question

我已經從http://html5up.net/prologue下載了HTML5模板。該模板是響應式的。默認模板帶有nav上的4個項目，如下所示：

我想向nav添加更多項目。所以我修改nav加入兩行代碼爲ff和gg：

<nav id="nav">       
    <ul> 
     <li><a href="#top" id="top-link" class="skel-layers-ignoreHref"><span class="icon fa-home">Intro</span></a></li> 
     <li><a href="#portfolio" id="portfolio-link" class="skel-layers-ignoreHref"><span class="icon fa-th">Portfolio</span></a></li> 
     <li><a href="#about" id="about-link" class="skel-layers-ignoreHref"><span class="icon fa-user">About Me</span></a></li> 
     <li><a href="#contact" id="contact-link" class="skel-layers-ignoreHref"><span class="icon fa-envelope">Contact</span></a></li> 
     <li><a href="#ff" id="contact-link2" class="skel-layers-ignoreHref"><span class="icon fa-envelope">ff</span></a></li> 
     <li><a href="#gg" id="contact-link3" class="skel-layers-ignoreHref"><span class="icon fa-envelope">gg</span></a></li> 
    </ul> 
</nav> 

但現在當我滾動nav不能正確更新。它的工作原理高達淨資產值4項（因爲是默認值），但沒有任何超越4參見下面的例子：

我該如何解決這個問題？對於導航改變/影響，css中沒有太多內容。

編輯

我加入，我已經添加到頁面的body的代碼。

<!-- Contact (given in the template) --> 
<section id="contact" class="four"> 
    <div class="container"> 
     <header> 
      <h2>Contact</h2> 
     </header> 
    </div> 
</section> 
<!-- I've added the two sections below --> 
<section id="ff" class="five"> 
    <div class="container"> 
     <header> 
      <h2>Contact</h2> 
     </header> 
    </div> 
</section> 
<section id="gg" class="six"> 
    <div class="container"> 
     <header> 
      <h2>Contact</h2> 
     </header> 
    </div> 
</section> 

Answer 1

你放置的實際內容爲每個導航項目必須具有相同的id值你在每個錨的href屬性所指定的部分。您也保留id="contact"爲新的兩個部分也造成這個問題。

對於新的兩節添加版塊標記應該是這樣的：

<section id="ff" class="five"> 

和

<section id="gg" class="six"> 

我已經下載了模板並測試了它，這是一件事，你會必須遵循，在導航欄中的鏈接，您的主播ID將匹配此模式href_value鏈接，所以您的導航代碼應該是：

<nav id="nav">       
    <ul> 
     <li><a href="#top" id="top-link" class="skel-layers-ignoreHref"><span class="icon fa-home">Intro</span></a></li> 
     <li><a href="#portfolio" id="portfolio-link" class="skel-layers-ignoreHref"><span class="icon fa-th">Portfolio</span></a></li> 
     <li><a href="#about" id="about-link" class="skel-layers-ignoreHref"><span class="icon fa-user">About Me</span></a></li> 
     <li><a href="#contact" id="contact-link" class="skel-layers-ignoreHref"><span class="icon fa-envelope">Contact</span></a></li> 
     <li><a href="#ff" id="ff-link" class="skel-layers-ignoreHref"><span class="icon fa-envelope">ff</span></a></li> 
     <li><a href="#gg" id="gg-link" class="skel-layers-ignoreHref"><span class="icon fa-envelope">gg</span></a></li> 
    </ul> 
</nav> 

Answer 2

調用仙子 節頁嘗試按照模板找到這個代碼，並添加你種在左側邊欄

<section id="contact" class="four"> 

#contact to call id="contact"