无法向导航添加更多链接

Question

我已经从 http://html5up.net/prologue 下载了 HTML5 模板。该模板是响应式的。默认模板在 nav 上有 4 个项目，如下所示：

我想向 nav 添加更多项目。所以我通过为 ff 和 gg 添加两行代码来修改 nav:

<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 中没有太多导航到 change/impact。

编辑

我正在将我添加的代码添加到页面的 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

您为每个导航项放置实际内容的部分必须具有与您在每个锚点的 href 属性中指定的值相同的 id 值。您也为导致问题的新两个部分保留了 id="contact"。

对于新添加的两个部分，您的部分标签应如下所示：

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

和

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

我已经下载了模板并对其进行了测试，这是您必须遵循的另一件事，在导航栏中的链接上，您的锚点 ids 将匹配此模式href_value-link，所以你的导航代码应该是：

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

无法向导航添加更多链接

Unable to add more links to nav

html

nav

responsive-design