Personal Portfolio Webpage - Build a Personal Portfolio Webpage

I keep getting this error: :Your #navbar element should always be at the top of the viewport. Whereas my code does have the navbar at the top

**

<title>My Portfolio</title>
<header>
		 <nav id="navbar">
  <ul class="nav-list">
    <li>
      <a href="#welcome-section">About</a>
    </li>
    <li>
      <a href="#projects">Work</a>
    </li>
    <li>
      <a href="#skills">Skills</a>
    </li>
  </ul>
</nav>

My Personal Portfolio

</header>
<main>
	<section id="welcome-section">
		<h1>About Me</h1>
		<p>

I consider myself to be ambivert, I can be either introverted or outgoing depending on my environment. Being around family and friends, going out, and watching movies and series are some of the things I enjoy doing in my spare time.

Skills

  • - HTML
  • - CSS
  • - Laravel

Projects

project

< Tribute Page />

project

< Random Quote Machine />

Contact Me

Name:
			<label for="email">Email:</label>
			<input type="email" id="email" name="email"><br>

			<label for="message">Message:</label>
			<textarea id="message" name="message"></textarea><br>

			<input type="submit" value="Send">

			 <a
      id="profile-link"
      href="https://gitlab.com/"
      target="_blank"
      class="btn contact-details"
      ><i class="fab fa-github"></i> GitHub</a
    >
		</form>
	</section>
</main>
<footer>
	<p>Copyright © 2022. All rights reserved.</p>
</footer>
**

**body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
position: fixed;
background-color: #333;
color: #fff;
padding: 20px;
}

nav {
display: inline-block;
float: right;
margin-top: 20px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav ul li {
display: inline-block;
margin-left: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

main {
margin: 20px;
}

section {
margin-bottom: 50px;
}

h2 {
font-size: 32px;
margin-bottom: 20px;
}

ul {
margin: 0;
padding: 0;
}

@media {max-width: 780px;}{
img {
width: 300px;
height: 300px;
}
}

navbar{
position: fixed;
width: 30%;
top: 0;
left: 0;
background-color: white;
color: black;
font-family: ‘Exo 2’, sans-serif;
padding: 1em;
}

**

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

Your header element is fixed with some padding, and within it (as a child) you have the navbar element fixed. So, your navbar is not at the top of the viewport.

I updated my header element to:

header {
position: fixed;
background-color: #333;
color: #fff;
}

And I’m still getting the same error

Remove the top padding setting from the navbar

Now, remove the padding (or just top padding) property from your navbar selector, as @hbar1st said.

Updated:

navbar{

position: fixed;

width: 30%;

top: 0;

left: 0;

background-color: white;

color: black;

font-family: ‘Exo 2’, sans-serif;

}

But the error wont go away

navbar is id selector not an element selector. Put the # at the front of the navbar.

Updated to #navbar and it still wont pass

Post the entire html and css code again here. Use </> button in your code editor and paste code between two groups of backticks ```.

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