Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

Hello! i cannot get past the point of: Your #nav-bar should always be at the top of the viewport. any tips?

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">
        <link rel="stylesheet" href="styles.css">
        <title>Personal Portfolio Project</title>
      
    </head>
    <body>
        <ul class="navbar" id="navbar">
            <li> 
                <a href="#welcome-section">Welcome Section</a>
            </li>
            <li> 
                <a href="#projects">Projects</a>
            </li>
        </ul>
        <div id="welcome-section">
            <h1>Text</h1>
        </div>
        <div id="projects">
            <div class="project-tile"></div>
            <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-71">1st Project</a>
        </div>
        <div id="profiles">
            <a id="profile-link" target="_blank" href="https://www.freecodecamp.org/fccee4deb98-c415-4651-9b82-c5c858afe5f2">FreeCodeCamp Profile</a>
        </div>
    </body>
</html>

/* file: styles.css */
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

#navbar {
    position: fixed;
    top: 0;
    background-color: white;
    z-index: 1000;
    width: 100%;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

body {
    margin: 0; /* Removes default margin around the page */
}

#welcome-section {
    margin-top: 60px; /* Prevents the navbar from covering the content */
}

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

This might help. You need to use css to make the element be consistently positioned at the top, no matter how far down you scroll. The navbar needs to stick up there.

A great place to start looking for info is the MDN docs.Let me know if you need further help.

1 Like
3

Hi there and welcome to our community!

Instead of trying to fix the ul element directly to the top of the page, try putting it inside a nav element and applying your CSS rules to that element.

1 Like
4

Thanks, this solved it!

1 Like