Test No. 5 Product Landing Page

#1

Hello, my navbar element passes the first 4 test. But Nr. 5 wont work.
I’ve added the classes: “nav” 2nav-bar2 and “nav-link” and linked them to the sections as specified
(I think?)

When I click on the links in the nav menu it works fine in my browser.

I also tested it on mozilla and chrome.

My pen: https://codepen.io/doger83_Dev/pen/XWJBGZJ

Code:

<header id="header" class="header clearfix">
    <nav>
         <ul class="nav nav-pills pull-right">
               <li role="presentation" class="nav-link active"><a href="#home">Home</a></li>
               <li role="presentation" class="nav-link"><a href="#About">About</a></li>
               <li role="presentation" class="nav-link"><a href="#Contact">Contact</a></li>
         </ul>
         <img id="header-img" class="img-fluid" src="./docs/img/logo.png" alt="DoubleD Artworks">
   </nav>
</header>
<section id="about">
      <h1>Section About</h1>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel corrupti tem</p>
</section>

I cant find the mistake?

#2

I see it passing, can you expand on what’s wrong?

1 Like
#3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

1 Like
#4

It was that I’ve added the “nav-link” class to the <li> instead to the <a> tag.

Solution:

<nav>
   <ul class="nav nav-pills pull-right">
      <li role="presentation" class="active"><a href="#home">Home</a></li>
      <li role="presentation" ><a class="nav-link" href="#About">About</a></li>
      <li role="presentation" ><a class="nav-link" href="#Contact">Contact</a></li>
  </ul>
  <img id="header-img" class="img-fluid" src="./docs/img/logo.png" alt="DoubleD Artworks">
</nav>

PS
Thanks for the tip with code lines in the editor.

#5