Pls how can I link my my .nav-link to its corresponding .main-section text?

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

/* file: index.html */
<main id="main-doc">
<section class="main-section" id="Introduction"><header>Introduction</header><p></p><code></code><li></li></section>
<section class="main-section" id="What_you_should_already_know"><header>What you should already know</header><p></p><code></code><li></li></nav></section>
<section class="main-section" id="JavaScript_and_Java"><header>JavaScript and Java</header><p></p><code></code><li></li></section>
<section class="main-section" id="Hello_world"><header>Hello world</header><p></p><code></code><li></li></section>
<section class="main-section" id="Variables"><header>Variables</header><p></p><code></code><li></li></section>
<section class="main-section" id="Declaring_variables"><header>Declaring variables</header><p></p><code></code><li></li></section>
<section class="main-section" id="Variable_scope"><header>Variable scope</header><p></p><code></code><li></li></section>
<section class="main-section" id="Global_variables"><header>Global variables</header><p></p><code></code><li></li></section>
<section class="main-section" id="Constants"><header>Constants</header><p></p><code></code><li></li></section>
<section class="main-section" id="Data_types"><header>Data types</header><p></p><code></code><li></li></section>
  <section class="main-section" id="if...else_statement"><header>if...else statement</header><p></p><code></code><li></li></section>
    <section class="main-section" id="while_statement"><header>while statement</header><p></p><code></code><li></li></section>
      <section class="main-section" id="Function_declarations"><header>Function declarations</header><p></p><code></code><li></li></section>
        <section class="main-section" id="Reference"><header>Reference</header><p></p><code></code><li></li></section>
      <nav id="navbar"><header><ul><li><a class="nav-link" href="#Introduction.html">Introduction</a></li></header>
      <li><a class="nav-link" href="#What_you_should_already_know.html">What you should already know</a></li>
      <li><a class="nav-link" href="#JavaScript_and_Java.html">JavaScript and Java</a></li>
      <li><a class="nav-link" href="#Hello_world.html">Hello world</a></header></li>
      <li><a class="nav-link" href="#Variables.html">Variables</a></li>
      <li><a class="nav-link" href="#Declaring_variables.html">Declaring variables</a></li>
      <li><a class="nav-link" href="#Variable_scope.html">Variable scope</a></header></li>
      <li><a class="nav-link" href="#Global_variables.html">Global variables</a></li>
      <li><a class="nav-link" href="#Constants.html">Constants</a></li>
      <li><a class="nav-link" href="#Data_types.html">Data types</a></li>
      <li><a class="nav-link" href="#if...else_statement.html">if...else statement</a></li>
      <li><a class="nav-link" href="#while_statement.html">while statement</a></li>
      <li><a class="nav-link" href="#Function_declarations.html">Function declarations</a></li>
      <li><a class="nav-link" href="#Reference.html">Reference</a></li>
      </ul>
      </nav>
</main>

/* file: styles.css */


  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.49

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

for the anchor element to work, the href has to be identical to the id of the target element, with a # in front. You have added an extra thing in all your href

3

thank you so much i appreciate

4

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