how can i placed nav-bar at the top of the view port??
Hi, welcome to the FCC forum.
You can use:
position: sticky; top: 0;
for top of the viewport, you have to choose position fixed,
because position fixed relative to the viewport.
this is from MDN: "
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a
perspective , or
filter property set to something other than
none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with
filter contributing to containing block formation.) Its final position is determined by the values of
bottom , and
This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page ."