Needy Needy - 1 month ago 10
CSS Question

One page navigation not working



header nav.bottom {
width: 50em;
height: 2.5em;
line-height: 2.5em;
text-align: center;
background: rgba(255, 255, 255, .8);
}
header nav.bottom ul {
position: relative;
z-index: 1;
}
header nav.bottom ul li {
width: 10em;
float: left;
}
header nav.bottom ul li a {
color: #444;
}
section {
margin: auto;
padding: 1em;
max-height: 30em;
overflow-y: scroll;
background: rgba(255, 255, 255, .8);
}
article {
margin: auto;
min-height: 30em;
}
article h2 {
padding: 1em;
font-size: 2em;
line-height: 2em;
}

<script src="https://use.fontawesome.com/6d546bccd4.js"></script>
<nav class="bottom">
<ul>
<li>
<a href="#about"><i aria-hidden="true" class="fa fa-hand-peace-o"></i> About</a>
</li>
<li>
<a href="#blog"><i aria-hidden="true" class="fa fa-book"></i> Blog</a>
</li>
<li>
<a href="#portfolio"><i aria-hidden="true" class="fa fa-folder-o"></i> Portfolio</a>
</li>
<li>
<a href="#projects"><i aria-hidden="true" class="fa fa-flask"></i> Projects</a>
</li>
</ul>
</nav>
<section>
<article id="#about">
<h2>About</h2>
</article>
<article id="#blog">
<h2>Blog</h2>
</article>
<article id="#portfolio">
<h2>Portfolio</h2>
</article>
<article id="#projects">
<h2>Projects</h2>
</article>
</section>




Answer

The id of an element doesn't have to contain a hash (#). Change your markup to:

<section>
  <article id="about">
    <h2>About</h2>
  </article>
  <article id="blog">
    <h2>Blog</h2>
  </article>
  <article id="portfolio">
    <h2>Portfolio</h2>
  </article>
  <article id="projects">
    <h2>Projects</h2>
  </article>
</section>