Failing to pass the test because of navbar

HTML-CSS
1

My navigation bar fails the test
I am failing this:

Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

Here is a part of my html body code stripped out of content and minimized:

<body>
    <nav id="navbar">
        <header >
            <h2>SASS vs CSS</h2>
        </header>
        <a class="nav-link" href="#What_is_SASS?">What is SASS</a>
    </nav>
 <main id="main-doc">
    <section id="What_is_SASS?" class="main-section">
            <header>
                <h3>What is SASS?</h3>
            </header>
                <p></p>
                <p></p>
        </section>
 </main>
</body>

My #navbar includes 4 more .nav-link and of course there are 4 more section elements in my #main-doc and they are not empty as displayed here.

Can anyone please guide me towards the solution? What is the problem here am I failing to structure my DOM hierarchy? Why is the test “unhappy” ?

I am going to upload my work to github how ever I feel like I should stay away from linking the solution here.

Your browser information:

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

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

Hi,

If you use text element instead of h3, tests are getting pretty happy.

Example text element is here.

Have a nice coding!

3

Thank you for your reply,
but it did not solve the problem on my end.
Ended up replacing every h3 in my VCS and pasting the updated html code that still fails the same test…

4

Interesting, because if you replace

<h3>What is SASS</h3> to <text>What is SASS</text> in the code you provided, the the following test is passing.

Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

5 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>SASS vs CSS</title>
</head>
<body>
    <nav id="navbar">
        <header >
            <h2>SASS vs CSS</h2>
        </header>
        <a class="nav-link" href="#What_is_SASS?">What is SASS</a>
    </nav>
    <main id="main-doc">
        <section id="What_is_SASS?" class="main-section">
            <header>
                <text>What is SASS?</text>
            </header>
                <p></p>
                <p></p>
        </section>
    </main>
</body>
</html>

Am I making mistakes here, or does this passes the test on you side?

6

Just realized that it’s not about the html element. It’s about the text in it.

<body>
    <nav id="navbar">
        <header >
            <h2>SASS vs CSS</h2>
        </header>
        <a class="nav-link" href="#What_is_SASS?">What is SASS</a>
    </nav>
 <main id="main-doc">
    <section id="What_is_SASS?" class="main-section">
            <header>
                <h3>What is SASS</h3>
            </header>
                <p></p>
                <p></p>
      </section>
      
 </main>
</body>

Looks like the problem is just the question mark in the end of text which is in header.
You need to keep both or none of them.

Just saw the difference on my previous answer.

7

Thank you a lot Dashi,
how did I miss that question mark, fixed it up and it finally passed.

8

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