Help me please! Product landing page - NavBar Viewport

1

Hello!! I am a beginner here , and I am having problems with the navbar especially. I cannot figure out how to make it always at the top of the viewport.
I already set the navbar position on “fixed” , set the width 100% and set it at top “0” and left “0”.

Can you please give me some advice and feedback? I would appreciate it a lot.

Here’s the link to check my pen:
https://codepen.io/nikagioia/pen/ZEQGwKV

2

In css file
#nav-bar{
position: relative;
}

1 Like
4

Hello TouhidAlam…
I set the nav-bar on position “relative” now, but I still cannot pass the testing result.
It keeps saying this:

  1. The navbar should always be at the top of the viewport.
    #header or one of its children should be at the top of the viewport even after scrolling : expected 467.44000244140625 to be close to 0 +/- 15
    AssertionError: #header or one of its children should be at the top of the viewport even after scrolling : expected 467.44000244140625 to be close to 0 +/- 15

I do not really get it.

5

What do you mean? I don’t understand :frowning:

6

You were correct before.
You had kept position : fixed before , but you had mistakenly forgotten to remove position: relative. So that was overriding the position:fixed.
I forked your pen and made the necessary change : https://codepen.io/questionreality/pen/JjGGGza

7

Add bg-color
#header {
background-color: #ffcccc;
margin: 0px auto 10px auto;
}

Remove position

#nav-bar{
position: relative;
}

Edit margin
#introduction {
text-align: center;
margin-top: 150px;
}

also Edit Video player

8

Thank you so much questionreality

1 Like
9

thank you so much TouhidAlam