How to make navbar at the top of the viewport

<nav id="nav-bar" position="fixed">

https://codepen.io/reemnovel/pen/GRpedNL

Hi there,

I tried to look at your pen, but I’m not sure I understand your need. I can see that your nav is a bit at the top.

Tell us clearly what’s your need and we can help

https://codepen.io/reemnovel/pen/GRpedNL/

Hi @Bam92 When I test the page, it says that : for layout, the navbar should always be at the top of the viewport. I am not sure how to do this.

I checked your pen and I spotted some coding errors that might hinder the nav-bar being fixed …
First …close your header tag after your nav-bar items.(html)
Then…remove all the tags you have added on the css.
Then code for id header e.g.
#header{
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 20px;
}
Add other styling like background color…etc;
NB. when the nav-bar is fixed other elements go under it, so you need to set the margin-top of the main page.

Hello
I’m still having difficulty with this:

#nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
justify-content: space-around;
float: left;
z-index: 10;
min-height: 75px;
padding: 0px;
display: flex;
}

It says navbar should be on top :thinking:

hi @reemnovel

you might need to remove the float attribute

imagine your navbar is not at top initially but you need it to stick at top once it reaches there even when you can scroll the rest of the page… use sticky and give top a value how much off you want it from the top… top: 0; is for totally at top of page…

and btw did you clear your float. dont use it if you dont need to.