<nav> bar with link to section in same page

HTML-CSS
1

I want that inside my to create a link that takes me to a section inside the same page. Unfortunately it doesn´t happen and I can´t find the mistake.

This is my code.

<!DOCTYPE html>

<nav id ="navbar">
  <header id = "title">choose</header>
  <a class = "nav-link" href ="#projects"> Projects </a>
  <a class = "nav-link" href="#fotos"> fotos </a>
  <a class = "nav-link" href="#el_santo"> el santo </a>
</nav>

<main id = "maindoc">
  
  <section id = "welcome-section">
    <h1> My Portfolio </h1>
  </section>
  
  <section id = "projects">
    <p class = "project-tile"></p>
    <a href = "https://codepen.io/elote23/pen/gOorvOR"> Project 1 </a>
  </section>
  
  <section id = "fotos">
    <p class = "project-tile"></p>
    <a href = "https://codepen.io/elote23/pen/WNdNoWZ"> Fotos </a>
  </section>
  
  <section id = "el_santo">
    <p class = "project-tile"></p>
    <a href = "https://codepen.io/elote23/pen/zYpOdZw"> El Santo </a>
  </section>

  
  <a id = "profile-link" href = "https://www.freecodecamp.org/fcc0ddb018c-6694-4291-8aef-f28519df767e" target = "_blank"> FCC </a>
  
</main>
2

Hi there!
I’ve checked in codepen and your code is working :slight_smile:
It’s just that the sections with corresponding ids are fitting in the viewport, that’s why you don’t see any changes.
However, once the sections are out of the viewport you’ll see that your nav links are working just fine :slight_smile:

You can test them by changing height property of a section, for example:

section {
  height: 500px;
}
1 Like
3

thanks for your answer!

I´m doing the project : “Personal portfolio”. And even if i´ve the code as i showed before, it doesn´t let me pass that point. it gives me a mistake.

I don´t know if can be a mistake with the “codepen” or if I´m doing something wrong that I can´t see.

I tried rewriting the code from the start. I tried copying an old code that worked in another project that I did. but nothing worked…

code1
code11294×838 151 KB

4

Hey! Indeed, 7th test is not passing.

Try putting the links in unordered list, normally the links in the navbar are placed within a

    tag like so:

<ul>
  <li><a class = "nav-link" href ="#projects"> Projects </a></li>
  <li><a class = "nav-link" href="#fotos"> fotos </a></li>
  <li><a class = "nav-link" href="#el_santo"> el santo </a></li>
</ul>

Then for styling use flexbox, for example:

#navbar ul {
  display: flex;
  margin: 5px;
}

#navbar li {
  padding: 12px;
}

ul {
  list-style: none;    // to remove bullets
}
5

And, the test is checking if the page is scrolling as you click on the links.
Since there’s no content yet under ‘sections’, the page is not scrolling, that’s why the test is failing.

If you put some content in the sections the test will pass.

I tested it by changing section’s height :wink:

image
image1777×875 101 KB

Edit: Actually, if you fulfil user story 2 in #Layout, the test will pass :wink: since the sections will be moved out of the viewport.
2. The height of the welcome section should be equal to the height of the viewport.

1 Like
6

thank you very much!! You´re very right!!! As it doesnt scroll because there´s no content then the test fails. But as soon as I edit the height it passes the test.

Thanks!

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.