Product Landing Page corresponding sections

Hi, I got this error : When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’
This is my code <a href="#header"><button class="nav-link" type="button"><strong>Contact us</strong></button></a> <a href="#frame"><button class="nav-link" type="button"><strong>Features</strong></button></a> <a href="#form"><button class="nav-link" type="button"><strong>What is XINO?</strong></button></a>

It works but my error doesn’t disappear.

Did you wrap all of this code inside a nav element?

Also share the codepen link if possible to make the problem clear.
Thanks!

  <header id="header">
    <nav id="nav-bar">
      <img id="header-img" src="https://i.imgur.com/0kwOpZN.png">
      <a href="#header"><button class="nav-link" type="button"><strong>Contact us</strong></button></a>
      <a href="#frame"><button class="nav-link" type="button"><strong>Features</strong></button></a>
      <a href="#form"><button class="nav-link" type="button"><strong>What is XINO?</strong></button></a>
    </nav>
  </header>

Actually I’m not really using codepen I have all my images in my pc, so I don’t stay to upload them etc.

I remember having the same error. try removing the type='button' if that doesn’t work then remove all the buttons and just use a tags and give them a class of ‘nav-link’. I remember that working for me

Alright lemme try this .

Yes because using buttons as navigation elements is a “bad” practice (i maybe wrong) in real world projects to my knowledge so I went with anchor tags and it worked for me. Let me know if it works for you!

<header id="header">
    <nav id="nav-bar">
      <img id="header-img" src="https://i.imgur.com/0kwOpZN.png">
      <a class="nav-link"href="#header">Contact Us</a>
      <a class="nav-link"href="#header">About Us</a>
      <a class="nav-link"href="#header">What is XINO?</a>
    </nav>
  </header>

Thanks my g.

1 Like