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: " fixed
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 transform
, 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 perspective
and filter
contributing to containing block formation.) Its final position is determined by the values of top
, right
, bottom
, and left
.
This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page ."