Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Can’t seem to link the nav-links to the designated section elements and I don’t know what I’m doing wrong. Any ideas?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main-doc">
      <section class="main-section" id="Full_Crimp">
        <header>Full Crimp</header>
        <p></p>
        <p></p>
        <li></li>
        <code></code>
      </section>
      <section class="main-section" id="Half_Crimp">
        <header>Half Crimp</header>
        <p></p>
        <p></p>
        <li></li>
        <code></code>
      </section>
      <section class="main-section" id="3_Finger_Drag">
        <header>3 Finger Drag</header>
        <p></p>
        <p></p>
        <li></li>
        <code></code>
      </section>
      <section class="main-section" id="Sloper">
        <header>Sloper</header>
        <p></p>
        <p></p>
        <li></li>
        <code></code>
      </section>
      <section class="main-section" id="Pockets">
        <header>Pockets</header>
        <p></p>
        <p></p>
        <li></li>
        <code></code>
      </section>
    </main>
    <nav id="navbar">
      <header>Climbing grips</header>
      <li><a class="nav-link" href="Full_Crimp">Full Crimp</a></li>
      <li><a class="nav-link" href="Half_Crimp">Half Crimp</a></li>
      <li><a class="nav-link" href="3_Finger_Drag">3 Finger Drag</a></li>
      <li><a class="nav-link" href="Sloper">Sloper</a></li>
      <li><a class="nav-link" href="Pockets">Pockets</a></li>
    </nav>
  </body>
</html>
/* file: styles.css */
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

The nav links are internal links so they must start with # as all id names that you link to are referred to that way. #introduction etc

To expand on what hbar1st said.

Links to specific sections on a page start with a hash (#) followed by the id of the section to be linked to.

In your code, for example, to link to the section with

id= "Full_Crimp" 

the code for your link should read

<li><a class="nav-link" href="#Full_Crimp">Full Crimp</a></li>

Hope that helps

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.