Build a Personal Portfolio Webpage-Element has height of full viewport vs. fixed navbar at top?

HTML-CSS
1

Tell us what’s happening:

After changing the height of my #welcome-section to 100vh, I’m now receiving the following message from the test suite:

  1. The navbar should always be at the top of the viewport.

What’s confusing is that I had already passed that test with the following CSS:
navbar {
position: fixed;
top: 0px;
}

But now with the welcome-section height being changed to encompass the full viewport, I’m getting the navbar error message. This actually makes sense to me because the following concepts seem to be contradictory, meaning I don’t know how they could both be true: the navbar is fixed at the top of the viewport AND the welcome-section element’s height is equal to the height of the viewport.

Any help in sorting this out would be much appreciated!

Your code so far

navbar { position: fixed; top: 0px; } @media (max-width:700px) { navbar { position: static; } } #welcome-section { height: 100vh; } Go to projects! Link to my profile

Welcome to my portfolio page!

Project #1
Link to project **Your browser information:** Google Chrome on Chromebook (not sure which version, but I think it's the most recent) User Agent is: Mozilla/5.0 (X11; CrOS x86_64 10575.58.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage

2

Sorry I’m having trouble copy/pasting my code. And for some reason CodePen is not letting me save my pens that I’ve created in the FCC Test Suite today. Here’s a link to a pen with my code that is not in the FCC Test Suite. Sorry for the confusion!

3

Just a detail.
In the code in your codepen, your CSS “navbar” is selecting nothing, I think you forgot the hash in front of the word.

4

That’s it! Thank you for catching that, MorsEtVita!

As a side note, wouldn’t the fixed navbar at the top come into conflict with the welcome-section having the height of the full viewport?

5

I don’t think so a priori, actually it depends on what you want to do.

My hints now: I would set a fixed height to the navbar, then set a background color like background: white and then z-index: 1, that would make the nav come to the “front” of the screen (the rest of the page is 0 [behind] and the navbar would be 1 [in the front]).
z-index equal to 0, maybe you already know, is the default value.

6

Interesting…I’ll give it a try! Thank you MorsEtVita!