Personal Portfolio Navbar problem

1

Hey everyone,

I’m working on the personal portfolio challenge and here’s my pen: https://codepen.io/Kaskazaraku/pen/KKpGXgR

As you can see, there’s only the navbar thingy that’s testing negative! I just don’t know why because when I scroll the page, it does stay on top all the time.

If you could give me a hand here, I would be much grateful to you…

Thanks!

2

I think the issue is that the nav element (which is the one checked) has actually an heigth of 0px, and it is kinda not found

after a few trials you can just give to the nav element an heigth of 100% (be that through class, id, or whatever selector you use) and it will be recognised

3

Thank you for your answer!

I did add height: 100%; to the nav element but it still doesn’t pass the test :confused:

4

The CSS statement for the .nav should be outside of the media query, the instruction is for the navbar to always be fixed.

.nav {
  position: fixed;
}

This past the test.

Best regards.

5

Thank you for your answer but the property position is already fixed.

Here’s my current code.

.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.nav-list {
display: flex;
margin-right: 2rem;
}

6

you are missing the closing bracket for the media query
but before you had a selector for the nav element outside of the media query, I just added an height of 100% to that selector and it worked

7

The nav styles you have in the media query doesn’t really belong there. But technically you can switch to using min-width for the media query and that should let you pass.

1 Like
8

This worked!! I love y’all, ’ hope you stay safe.

Now I wish I could have done it myself and also understand why switching the media query to min-width actually solved the problem :smiley:

I guess I’ll leave it to time.

9

It’s almost the same as if you had moved the selector out of the media query. As long as you run the test with the screen above 28.75em width it will pass the test. It will still fail the test when the screen is below that width.

I still think you should move the selector out of the media query as it is likely styles you want on the element no matter what the screen size is.