Product Landing Page nav-link error

1

Almost finished my product landing page. It passes all the tests except the nav-links.

I can’t find my error. Can some one more experienced help?

here is the page:

2

That is a nice-looking landing page. Looking at this on my phone it appears that your links are not visible at small screen

1 Like
3
  1. I can see at least three clickable elements inside the nav element, each with the class “nav-link”.
    There are not at least 3 elements with a class of “nav-link” within the #nav-bar element : expected 0 to be at least 3

If you look closely at your naming of id /classes and choice of elements you are not satisfying this condition.
3 clickable elements are not in a <nav id="nav-link">

<div class="nav-bar">
    <nav class="nav-bar__Items" id="nav-bar">
      <div class="nav-bar__Link nav-bar__Link-brand">
        <a href="https://macexperts.gr" target="_blank"><img src="http://macexperts.gr/oc/image/catalog/macexperts%20logo2.gif" height=42px id="header-img"/></a>
      </div>
    </nav>
  1. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page. The #nav-bar contains no .nav-link: expected 0 to be at least 1

Because the tests cannot locate the nav with three buttons it cannot properly confirm this requirement even though you have satisfied this story.

This should be an easy fix. Juggle some id names and elements (and their corresponding CSS selectors) and you’re golden.

1 Like
4

Thank you! Regarding the phone, I know it but I stuck with the nav-link test and I left it for later.

I will do some id juggling and see how it goes.

Thank you for your help.