Fixed Navbar that scrolls seemlessly

HTML-CSS
1

Having a hard time figuring out, with what I currently have, how to make the nav bar fixed, and scroll seamlessly like the project example. Also not entirely sure how to get the image in the corner correct (like the fcc project example) if anyone has any tips.

2

This below will keep your header at the top. Taking it out of flow will lets main slide up to the top of window and it needed to be pushed back down - hence the padding-top.

This will not take care of the case of your internal hash links. The browser will try to position those targets at the top of page when internal links are selected. That would put those under the header in that case.

Seek out a tutorial on fixed headers for the gritty details.

header{
	position:fixed; /*fixed to top of page */
	z-index:10;  /* make sure it is on top of other content */
	width:100%; /* across entire width */
}
main{
	padding-top:50px; /* push the main back down */
}

Here is a very basic demonstration of fixed header with internal links I made for someone once. Maybe it will be helpful

2 Likes
3

@alhazen1 has provided a great response to the question.

if you would also like to have a look at the changes I made in the forked codepen, it may also bring some insight to the fixed position of the navbar/header and the z-index

1 Like
4

I actually wanted to ask the more seasoned developers why these nav bars are not sticking on my ipad pro.

I do have the same issue with one my js / jquery Navbars that’s honestly driving me a bit batty.

1 Like
5

Thanks everyone @alhazen1 @Kyle-S-Thompson , The solution @alhazen1 was perfect for what I was trying to accomplish and I managed to understand it. I’m thinking I might look at the solution for anymore potential beneficial refactors / getting the image on the header to be perfect. Thanks guys !

1 Like