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"

无法添加更多链接到导航

2 个答案: