How to keep a Navbar at the top of my viewport?

How to keep a Navbar at the top of my viewport?


I am currently doing my Product landing page project and I was wondering how to fulfill this user story

User Story #13: The navbar should always be at the top of the viewport.

Here is what I have done so far :


You need to use position: fixed;


Thanks! but now my navbar is squished to the left. What happened?


You need to style the nav and give it position using top or right or what you want. A position on your nav disassociates it with the position of your header, which your Nav is the child of.

Try putting the position on your header and see what happens instead.


thanks but it is still doing the same thing :confused:


You’re getting closer.

Putting position on an element gives it layout, this triggers the browser to look for layout properties.

Add width, and padding to your header now (hint: on width use percentages)


Position top is not a thing.

Top is .


Hi, @booklion
You gave position: top, @Tirjasdyn did not mean that.

You have to use position property with value as position: fixed and then make it to top: 0; left: 0; and apply a width: 100%;

You have given the header as position: fixed thats fine, now give it a top and left property as in the above hint and give it a 100% width, now you will be able to see your navbar on top.

For the ul tag there will be a default margin and padding, so you have to clear it out and adjust it according to your need.

Apply flex properties to header to make the elements in your navbar to align center.


Thank you all so much!!! :hugs: