Need help with navbar (Css)

https://codepen.io/pjsahrudh/pen/XWJQLGg

I cant actually fix the navbar even though ive used overflow:hidden .I wonder whats wrong in the code

What are you trying to achieve?

as a whole a landing page but here i was getting to make the navbar sticky and the whole purpose of the post

The property/value overflow: hidden has nothing to do with positioning. You can use position: fixed or position: sticky (with top: 0 offset) on the #nav-one element for that.

If you use position fixed you will need to make some adjustments because it takes the element out of normal document flow.

Actually i was using flex to set the elements left and right on the #nav-one also the elements moved to the left when i used the property/value of position:fixed so i wanted to know if it was possible to do that here as i couldnt get it done though.!

If you give the #nav-one element width 100% it should look the same with position fixed on it. You will need to push down the top-content manually some more to have it be in the same place (i.e. the height of the nav which is now no longer part of the document flow).

Or as said, you can also use position sticky and top: 0 on it.

wow thanks just when i kept the width as 100% the flex worked again ,thanks :smile: