Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
keep get the error of
Your #navbar element should always be at the top of the viewport.

I have the the nave bar set to

position: fixed;
top: 0;
in css

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  
<nav id="navbar" class="nav">
  <ul id="navbar">
    <li>
      <a href='#welcome-section'>Welcome</a>
      </li>
      
      <li>
      <a href='#project-tile'>Projects</a>
      </li>

      <li>
      <a href='#profile-link'>Profile</a>
      </li>
  </ul>
</nav>

  <div id="welcome-section">
    <h1>Welcome</h1>
    <p>I have recently completed a 12-week coding bootcamp with Code Nation, where I learned skills to be a junior web developer. These included Trelloboard, reactive and CSS. Examples of my work can be found on my GitHub. I also used Netlify, Heroku and api to build a mood player.s</p>
</div>

<div id="projects">
<div class="project-tile">Projects</div> 
<a href='https://github.com/jayp19021993'>Github</a>
</div>

<div id="profile">
  <a id="profile-link" target="_blank"
  href="https://www.freecodecamp.org/fcc275bb18a-551f-4dd4-b274-73d35d622ae2" >Profile</a>
</div>

</body>
</html>

/* file: styles.css */
@media only screen and (min-width: 600px) {
  body {
      display:none;
  }
}

.navbar{
  position: fixed;
  top: 0; 
} 

h1,.p{
  font-family:helvetica ;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

@ jayp19021993 Hello there!
You have set an id selector “navbar”, so I think in your CSS stylesheet, you should note “#navbar” instead of “.navbar” (this latter is for a class selector).
let me know if it’s help ?

4

You have double navbar id in your html, you should have only one.
@jayp19021993

1 Like
5

And in the CSS you used class selector instead of id selector. Id selector required # sign.
@jayp19021993

6

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