How to get navbar at top of viewport?

Tell us what’s happening:
Describe your issue in detail here.
I’m trying to complete my final project and everything seems ok to me but I can’t get my navbar to the top of the viewport. I don’t know how I’ve managed to do this in previous projects… I’ve looked through the forum and searched on Google trying all the solutions but I can’t identify the problem. Please help :woozy_face:

   **Your code so far**
/* file: index.html */
<header id="header">
 <link rel="stylesheet" href="styles.css"/>
 <meta charset="UTF-8"/>
<meta name="viewport" content="width-device-width, initial-scale=1.0"/>
<title>Personal Portfolio Webpage</title>
<section id="welcome-section">Welcome to my page!
 <h1>Here you can find out what I've been getting up to...</h1>
</section>
<section id="projects">
 <div class="project-tile">
   <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page" id="tribute">Click to see my first tribute page!</a>
 </div>
</section>
<nav id="navbar">
<ul>
 <li><a href="#tribute">Tribute Page</a>
</ul>
</nav>
</header>
<section>
 <a id="profile-link" href="https://www.freecodecamp.org/_Dia" target="_blank">!Find my profile here!</a>
</section>
/* file: styles.css */
@media (max-width:800px){}

header {
 position: fixed;
 font-family: sans-serif;
 padding: 1em;
 width: 100%
}
   **Your browser information:**

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

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

Hi @sadiaaaa.x ,

First, you don’t have a head element in your code.

This part should go inside the head element:

You don’t have a body element also, so you need to add it.

To pass the #navbar test you need to target the navbar id selector, instead of header :

Also, the nav should be the first child of the header element.

Hi,

thank you for the help!! I did this and it still didn’t work. had to resort to youtube but finally got it after putting a top property with 0 :saluting_face:

1 Like

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