Build a Product Landing Page - Fixed navbar

HTML-CSS
1

Tell us what’s happening:
Hey!
My only error is:

Your #nav-bar should always be at the top of the viewport.

I’ve made the header with a fixed position, and I also added a fixed position to #nav-bar itself (Which doesn’t really help, just did it for trying to pass).
You can also see it live here and the entire code in the repo.

Can you please help me find the issue? Thanks!

Your code so far

header {
    padding: 0 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: black;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
}
/* I don't need it but it still doesn't fix the issue */
#nav-bar {
    position: fixed;
    right: 0;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

2

It is checking the nav position in relation to the top of the viewport and your nav is not close enough to the top of the viewport. If you move the header styles to the nav it should pass.

The requirements put a bit of a limitation on how you can design the page but that isn’t a bad thing to have to get used to.

3

Thanks!
Sadly didn’t find a solution to also keep the logo sticky, so I changed the styling to only have the sticky nav-bar.
I don’t think that the example given would even pass that user story because the header is fixed, not the nav-bar itself.

4

The example project does pass the tests.

I think the nav is just closer to the viewport top than yours. I think there is some +/- number used in the test (like a range it needs to be within).

1 Like
5

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