Need help with my navbar

Code Feedback
1

Hello, was wondering if someone could give a look over and give me some feedback and help with a few issues.

Issue1: I’m not sure what I did but my navbar is not smoothly going tot he top of the screen when it is minimized anymore. I don’t know what I did but it was working fine before.

Issue2and3: When I run the tests it is saying " 10. Additionally, the navbar should contain link () elements with the class of “nav-link”. There should be one for every element with the class “main-section”.

as well as…

" 13. When I click on a navbar element, the page should navigate to the corresponding section of the “main-doc” element (e.g. If I click on a “nav-link” element that contains the text “Hello world”, the page navigates to a element that has that id and contains the corresponding ."

I am not sure what to do, to me it looks like I have done these last 2 as well.

Any and all help is greatly appreciated.

1 Like
2

On issue 1,
I think you should create your anchor links like this:

<ul>
  <li><a class="nav-link">Home</a></li>
  <li><a class="nav-links">about</a></li>
</ul>

And remember to css the anchor links, by removing its decoration to none.
Try that and let me know.

3

on issue 2,

I think that’s because the tag need to have an href=“id” pointing to the id that was given to the section that it was navigating to.

<ul>
      <li class="nav-link" id="nav-intro"><a href="#Introduction">Introduction</a></li>
      <li class="nav-link"  id="nav-char"><a href="#Charmander">Charmander</a></li>
      <li class="nav-link"  id="nav-char"><a href="#Charizard">Charizard</a></li>
      <li class="nav-link"  id="nav-Gyar"><a href="#Gyarados">Gyarados</a></li>
      <li class="nav-link"  id="nav-Zap"><a href="#Zapados">Zapados</a></li>
      <li class="nav-link"  id="nav-Ala"><a href="#Alakazam">Alakazam</a></li>
      <li class="nav-link"  id="nav-Mach"><a href="#Machamp">Machamp </a></li>
      <li class="nav-link"  id="nav-Mew"><a href="#Mewtwo">Mewtwo</a></li>
      <li class="nav-link"  id="nav-Blas"><a href="#Blastoise">Blastoise</a></li>
      <li class="nav-link"  id="nav-Ref"><a href="#References">References</a></li>
</ul>

Also, try to put it in lowercase, the href, I mean.
Take a look at this website.
Let me know if it works.

4

Germanbobadilla,

So the first suggestion you wrote fixed all the issues i was having besides the orientation of my navbar when the window minimizes. I was putting the class and id in the (li) instead of the (a).

Still having an issue of getting the navbar to go to the top of the window like in the example tech documentation page they give us. Link for that one below

my page after the changes you recommended for issue 1.

5

Do you mean to say the navbar been fixed on top of the screen… Like sticky?

You can have your navbar positioned sticky and then give it a top of 0.

6

As for the resizing, have you tried hiding the navbar and creating another that was hidden in desktop, show on mobile?

Google, how to create a hamburger menu in css.