CSS/HTML nav-link help please

Code Feedback
1

Hi all,
Just doing to codeacademy’s product landing page test. And my nav-links aren’t directing me to the corresponding part of the page. Could anyone help please?
I’m just starting on the coding journey, so please forgive what will most likely be dodgy code. Here’s the bit of html:

<header id="header">
  <div class="branding">
    <img id="header-img" src="https://4bo7aze9g5f3h5mt512g7bec-wpengine.netdna-ssl.com/wp-content/uploads/2015/10/hardwood-floor-refinishing-in-Toronto-ON.png" alt="hallway wooden floors and a stairwayway carpet" width="70px" height="auto">
  <section id="Home"><h1>Blackheath Interiors</h1>
  </div>
</section>
  <nav id="nav-bar">
    <ul>
      <button>
        <li><a href="#Home" class="nav-link"></a>Home</li></button>
      <button>
        <li><a href="#Services" class="nav-link"></a>Services</li></button>
      <button>
        <li><a href="#Explore" class="nav-link"></a>Explore</li></button>
      <button>
      <li><a href="#Contact" class="nav-link"></a>Contact</li>
      </button>
    </ul>
  </nav>
</header>

Any help at all very much appreciated.

2

I see two issues:

Your first <div>, <section> combination isn’t well-formed

You can only put <li> inside <ul>. Put your buttons in the list item, not the other way 'round.

3

Originally I didn’t have the or the . I added them hoping it would fix the issue, but didn;t. It was this code below???

hallway wooden floors and a stairwayway carpet

Blackheath Interiors

<nav id="nav-bar">
  <ul>
      <li><a href="#Home" class="nav-link"></a>Home</li>
      <li><a href="#Services" class="nav-link"></a>Services</li>
      <li><a href="#Explore" class="nav-link"></a>Explore</li>
    <li><a href="#Contact" class="nav-link"></a>Contact</li>
  </ul>
</nav>
4

And thanks for your help.

5

The what? Can’t see what you are talking there

6

(Watch for disappearing tags in these messages. I’m just guessing what you didn’t have or didn’t have :slight_smile: Just wrap the tags in backticks (`) )

OK, with the second piece of code, you have your link areas outside your anchor tags. Move the ‘Home’, ‘Service’, etc bits so they are on the left of the </a> tag. That should get the links working.

7

oh sorry - very new to this. First ever post. I meant the button or the ‘section’

8

The a elements like this are not clickable, you need to have text inside them

1 Like
9

Thanks so much mcalex. It’s working. Yay. I completely missed that mistake!