Having problem in personal portfilo webpage

i have completed all the challenges in portfilo webpage but there one error showing : Your #navbar element should always be at the top of the viewport. … I have tried to solve it but it’s still showing error . PLSS HELP!!

MY CODE SOO FAR (html)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Personal Portfolio Webpage</title>
</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 I am Mimic</h1>
  <p>a web developer</p>
</section>
<section id="projects" class="projects-section">
  <h2 class="projects-section-header">These are some of my projects</h2>

  <div class="projects-grid">
    <a
      href="https://codepen.io/freeCodeCamp/full/zNqgVx"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Tribute Page
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    <a
      href="https://codepen.io/freeCodeCamp/full/qRZeGZ"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Random Quote Machine
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    <a
      href="https://codepen.io/freeCodeCamp/full/wgGVVX"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        JavaScript Calculator
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    <a
      href="https://codepen.io/freeCodeCamp/full/mVEJag"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Map Data Across the Globe
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    <a
      href="https://codepen.io/freeCodeCamp/full/wGqEga"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Wikipedia Viewer
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    <a
      href="https://codepen.io/freeCodeCamp/full/KzXQgy"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Tic Tac Toe Game
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
  </div>

  <a
    href="https://codepen.io/FreeCodeCamp/"
    class="btn btn-show-all"
    target="_blank"
    >Show all<i class="fas fa-chevron-right"></i
  ></a>
</section>
<a
      id="profile-link"
      href="https://github.com/freecodecamp"
      target="_blank"
      class="btn contact-details"
      ><i class="fab fa-github"></i> GitHub</a>
      </body>
</html>

CSS****

@media screen and (max-width: 400px) {
  nav {
    text-align: center;
  }
}

PLSS HELP !!

Try position absolute or position fixed. Top and left 0.

no . i have tried it not happening …

Here"s the new code HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Personal Portfolio Webpage</title>
</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 I am Mimic</h1>
  <p>a web developer</p>
</section>
<section id="projects" class="projects-section">
  <h2 class="projects-section-header">These are some of my projects</h2>

  <div class="projects-grid">
    <a
      href="https://codepen.io/freeCodeCamp/full/zNqgVx"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Tribute Page
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    <a
      href="https://codepen.io/freeCodeCamp/full/qRZeGZ"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Random Quote Machine
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    <a
      href="https://codepen.io/freeCodeCamp/full/wgGVVX"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        JavaScript Calculator
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    <a
      href="https://codepen.io/freeCodeCamp/full/mVEJag"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Map Data Across the Globe
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    <a
      href="https://codepen.io/freeCodeCamp/full/wGqEga"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Wikipedia Viewer
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    <a
      href="https://codepen.io/freeCodeCamp/full/KzXQgy"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Tic Tac Toe Game
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
  </div>

  <a
    href="https://codepen.io/FreeCodeCamp/"
    class="btn btn-show-all"
    target="_blank"
    >Show all<i class="fas fa-chevron-right"></i
  ></a>
</section>
<a
      id="profile-link"
      href="https://github.com/freecodecamp"
      target="_blank"
      class="btn contact-details"
      ><i class="fab fa-github"></i> GitHub</a>
      </body>
</html>

CSS

@media screen and (max-width: 400px) {
  nav {
    text-align: center;
    position: absolute;
    margin-top: 0;
    margin-left: 0;
  }
}

PLSS HELPP

Try position absolute on id navbar. And not only for mobile but pc as well.

Yes i tried in pc too … not happening

Could you pleaseshare codepen link with us?

I didn’t understand . What do you is code pen ?

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