Your #navbar element should always be at the top of the viewport

HTML-CSS
1

Hi (newbie here), hope y r good! I don’t understand why the code doesn’t pass. Can y please give me some advice? Thanks&thanks for all the good work!

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My portofolio</title>
    <meta charset="UTF-8"></meta>
    <link rel="stylesheet" href="styles.css"></link>
    </head>
    <body>
       <nav id="navbar" class="nav">
          <ul class="nav-list">
            <li>
              <a href="#welcome-section">About</a>
              </li>
            <li>
              <a href="#projects">Work</a>
              </li>
            <li>
              <a href="#contact">Contact</a>
              </li>
          </ul>
      </nav>
      <section id="welcome-section" class="welcome-section">
        <h1>
          Hey Im Mimic
        </h1>
        <p>
          a web developer
          </p>
          </section>
      <section id="projects" class="projects">
            <h2>These are some of my project</h2>
            <div class="myprojects">
              <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" class="project-tile">
              Tribute page
              </a>
                <img class="quote" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"></img>
            
          <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ">
          Random qote machine
          </a>
          <img class="quote" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"></img>
            <a href="https://codepen.io/freeCodeCamp/full/wgGVVX">Java script calculator
            </a>
            <img class="quote" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"></img>
            <a href="https://codepen.io/freeCodeCamp/full/mVEJag">Map data acros the globe
            </a>
            <img class="quote" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"></img>
            <a href="https://codepen.io/freeCodeCamp/full/wGqEga">Wikipedia Viwer
            </a>
            <img class="quote" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"></img>
            <a href="https://codepen.io/freeCodeCamp/full/KzXQgy">Tic tac toe game
            </a>
            <img class="quote" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png"></img>
            </div>
        </section>
        
            <section id="contact" class="contact">
              <h3>LETS WORK TOGETHER</h3>
              <p>How do you take your coffee?</p>
              <div>
                <a href="https://github.com/freecodecamp" target="_blank" id="profile-link">Github</a>
                </div>
              </section>
    </body>
  </html>

.welcome-section
{background: rgba(0, 0, 0, 0.5);
border-radius: 2px;
padding: 10px;
margin-top: 120px;
}
.projects {background:lightblue;
border-radius: 20px;
padding: 10px;
margin: 2px;
}
.contact {background:pink;
padding: 10px;
margin: 2px;
}

.myprojects {display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
padding: 10px;
margin: 2px;
justify-content: space-between;}

.quote {
width: 100px;
height: auto;
}

.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: yellow;
z-index: 10;
}

.nav-list {
display: flex;
margin-right: 2rem;
}

@media (max-width: 30em) {
.nav {
justify-content: center;
}

.nav-list {
margin: 0 1rem;
}
}

.nav-list a {
display: block;
font-size: 2rem;
padding: 2rem;
}

.nav-list a:hover {
background: lightblue;
}
2

So to clarify it, the last request of the test, for the navbar to be at the top is the part that I cant pass.

Thank you.

3

please share a link to this project on freeCodeCamp

4 
Hi, here is the link  https://personal-portfolio.freecodecamp.rocks.

Thanks

5

that is not the link to the challenge page, that is the example, please share the link to the challenge page.

6

Sorry! here it is:

7

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

8

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

1 Like
9

IT WORKED!!! ON A DIFFERENT BROWSER!!!

Thank y very much!!!:victory_hand: