The navbar should contain link (<a>) elements with the class of "nav-link". There should be one for every element with the class "main-section"

The navbar should contain link (<a>) elements with the class of "nav-link". There should be one for every element with the class "main-section"
0

#1
<nav id="navbar">
                <header id="header-contents"style="color:white;"><u>Web site Functional Specification</u></header>
                <ul>
                    <a class="nav-link" href="#Overview"><li>Overview</li></a>
                    <a class="nav-link" href="#Goals_and_Criteria"><li>Goals and Criteria</li></a>
                    <a class="nav-link" href="#Hardware"><li>Hardware</li></a>
                    <a class="nav-link" href="#Operating_System"><li>Operating System</li></a>
                    <a class="nav-link" href="#System_Software"><li>System Software</li></a>
                    <a class="nav-link" href="#Statistical_Data"><li>Statistical Data</li></a>
                    <a class="nav-link" href="#Network"><li>Network</li></a>
                    <a class="nav-link" href="#Navigation"><li>Navigation</li></a>
                    <a class="nav-link" href="#Content"><li>Content</li></a>
                    <a class="nav-link" href="#Themes"><li>Themes</li></a>
                    <a class="nav-link" href="#Logo"><li>Logo</li></a>
                    <a class="nav-link" href="#Site_Management"><li>Site Management</a>
                    <a class="nav-link" href="#Definition"><li>Definitions</li></a>
                </ul>
            </nav>

Cannot pass the test. What seems to be the mistakes>


#2

Would you mind adding the link to the task?
From your description I am not sure what you mean, so this would clarify things :slight_smile:


#3

I guess the list structure would be like ul > li with anchor elements placed, it would be ul > li > a
And also try removing the header and replace it with heading tags like h1 to h6


#4

okay, I did what like what youve suggested.

<ul>
                 <li><a class="nav-link" href="#Overview">Overview</a></li>
                  <li><a class="nav-link" href="#Goals_and_Criteria">Goals and Criteria</a></li>
                  <li><a class="nav-link" href="#Hardware">Hardware</a>
                  <li><a class="nav-link" href="#Operating_System">Operating System</a></li>
                  <li><a class="nav-link" href="#System_Software">System Software</a></li>
                  <li><a class="nav-link" href="#Statistical_Data">Statistical Data</a></li>
                  <li><a class="nav-link" href="#Network">Network</a></li>

Now Im getting this error: Each element with the class of “nav-link” should contain text that corresponds to the text within each (e.g. if you have a “Hello world” section/header, your navbar should have an element which contains the text “Hello world”).


#5

Okay brother, i just gave a suggestion, but it would be easy if you provide a codepen to your project to find out the problem


#6

here’s the link:


#7

It wants this id to be nav-bar

And the <nav> element should be inside <header>, it will clear you half way through almost


#8

The problem still persist after making changes to the code.

12. Each element with the class of "nav-link" should contain text that corresponds to the <header> text within each <section> (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world").

#9

Have you updated the codepen.?, so i shall check it


#10

Yes, I’ve updated it, and I’ve written exactly like the one gave us as a model. But still the test error persist


#11

You haven’t made this change which i said earlier

When i did the change, the error is removed,

Your design may break a little, so adjust it after you make these changes,

  1. nav should be inside <header></header> and give id=“header” to header, currently you have id as header-contents, so change it, and replace the id=“navbar” to nav-bar

#12

If I change the <nav id=“nav-bar”, my test failed increases,

but if I changed it to id=“navbar”, there is only one test failed.


#13

You are almost there, it says the link should correspond to the header, i checked it, and found a typo there,
In your last nav-link, you have the text as Definitions but in you header element you have Definition
Now it’s passing 16/16, good luck.!