.nav-link won't work, any suggestion?

#1

This is my code:

<main>
  <header id="header">
  
    <img id="header-img" src="https://cdn.mos.cms.futurecdn.net/wnt8XoAdv5GCk5NdC7SGwK-650-80.jpg" alt="Company Logo">
    
   <nav class="topnav" id="nav-bar">
  
     <button  class="nav-link" accesskey="1">
     <a href="#solarsystem">Solar System</a>
     </button>
     
     <button class="nav-link"  accesskey="2">
       <a href="#galaxy">Galaxy</a>
     </button>
     
     <button class="nav-link" accesskey="3">
       <a href="#universe">Universe</a>
     </button>
    
       </nav>
       
       <p>
     Find out the mysteries of the Universe.
    </p>
  
</header>
  
     
     <img id="solarsystem" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Planets2013.svg/2000px-Planets2013.svg.png" alt="solar system">
  
      <img id="galaxy" src="https://wallpaperaccess.com/full/639089.jpg" alt="galaxy">
     
   <img id="universe" src="https://binaryfortressdownloads.com/Download/WPF/Images/23405/WallpaperFusion-the-observable-universe-1920x1080.jpg" alt="universe">
  
  <section>
 <iframe id="video" width="950" height="315" src="https://www.youtube.com/embed/nGnX6GkrOgk" allowfullscreen></iframe>
  </section>
  
  <form id="form" action="mailto:https://www.freecodecamp.com/email-submit)." method="post" enctype="text/plain">
    <input id="email" name="email" type="email" placeholder="Enter your E-mail here!"required>
    <input id="submit" type="submit">

  </form>
  
      </main>
<footer> 
        <a href="#header">Back to Top</a>
</footer>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"
          </script>

I am 15/16 and when i click my nav bar it moves to where its supposed to its just not passing. Any help appreciated.

#2

please post your pen, when you ask for help. It is much easier to debug.

Anyway, it may be a browser incompatibility issue. I have seen this issue with many.

Try a different browser.

#3

https://codepen.io/Loughran93/pen/WNvJMvB

If its just the browser that’s cool but I’m on chrome which seems to work for everyone.

Got it Thanks

#4

please include the test suite to your pen, otherwise it is not possible to test
and anyway you need to submit your project with the test suite included and all tests passing

EDIT: ok, it is included, it is missing a > in the opening script tag

EDIT2: I confirm it is a compatibilty issue, on my side (also google chrome) all tests are passing

EDIT3: as I am here…
syntax error:

  • the #universe id must be unique, it is used multiple times in your code
1 Like
#5

Hey there! I have seen your code and noticed that you have given the same id’s <button></button> and your <img/> tag.
Like: <button id="solarsystem"></button
and: <img id="solarsystem" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Planets2013.svg/2000px-Planets2013.svg.png" alt="solar system">

Just remove the id’s from the button tag, and it will work great. :call_me_hand:

1 Like
#6