How do I make my nav-bar be at the top?

I am currently doing the product landing page, but I am stuck on making the navbar, it says “The navbar should always be at the top of the viewport”… how do I do that?

Hi @Kasakapen ,

You should fix your navbar in the header to the top irrespective of the scrolling. you can use the position: fixed property to handle this.

Maybe it would be good to post a link of your Landing Page on codepen.
Other time you did it.

@nivethakrishnan72 @icxc
here is the link to the code: https://codepen.io/nianaz/pen/yLXeBWR?editors=1100
I position fixed, but it did not work

I think you’re still working on the Landing Page, because I see the CSS page is still in its start.
image
I don’t realize where you added navigation in a fixed position.

@Kasakapen, when a test fails click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

I don’t see this anywhere in your code.

I deleted it, because I wanted to try other methods

Okay, I see. Do the research and if you’re still having an issue show us what you’ve got and tell us what you expect to happen that’s not happening.
We kind of don’t like to just give answers. You learn better and retain more if you research and try.

I tried position: fixed { top: 0} it worked… but may i ask why position absolute and the other values don’t work on the code?

" #navbar{
position: fixed;
}"

I hope this would help.

Just take a look here:
[CSS Layout - The position Property]
and try to understand what each position (fixed, absolute,…) is about.

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