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

Can anyone help me please?
This is really strange. On my development machine , when I run the page/with the fcc test script to test, ALL tests pass.
When I upload it to my host I get the error:
" 3. The navbar should always be at the top of the view-port.". It IS at the top of the view-port. I can’t figure out why this passes one place but not when I upload it. So weird. Would appreciate any input.
Thanks

Here’s my css for it:

#navbar {
    top: 0;
    left: 0;
    background-color: #303043;
    position:fixed;
    position:sticky;
}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Okay. I got it working on the server. I still have no idea why the test passes on one machine but not on another.
But, when I removed position sticky it passed.
No idea why. Since it was already position fixed as well.
Just glad to move along.

Well, it might be a good idea to figure out why so you don’t have this issue again in the future. If you give us a link to your project code we might be able to help you figure it out.

1 Like

If you have position: sticky coming after position: fixed, wouldn’t the latter be overridden by the former when rendering?

“Position-fixed” stays in the same place, independent of and out of the flow. Other elements treat it as if it’s not there. So, must adjust accordingly.

Sticky on the other hand, will stay in place only until it’s parent scrolls off.

So, sticky would definitely not be what we need for a permanently affixed navbar is what I’m thinking.

You would think right? But it didn’t. I can’t explain it.
Still can’t explain why fcc passed it on one machine but not on another either.
Fixed would be the way to go for the navbar though.

perhaps because your nav bar is already at the edge of the viewport and visually it isn’t different from just using position: fixed ?

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