Landing Page Nav Bar Help - last one I need to clear

HTML-CSS
1

My brain is fried. Can someone help me out with the nav bar sticking to the top? I’ve been working on the landing page and I had the bright idea to make it responsive too! But for the last two days trying to get a handle on using Grid, I’ve got some footing… haha!

Anyhow, I can’t seem to get my nav bar to stick to the top of the screen. Sometimes it does clear, sometimes it does not. I am sure it has something to do with grid as I had it working before without grid. However, the way the project was set up, I could not separate out the nav bar from the header. There is a way, I am sure; but that is way out of my wheel house right now. Thanks all!

2

Try this

#nav-bar{
	postion: absolute;
	top: 0px;
}

to

#nav-bar{
	postion: fixed;
}
3

or if you are using bootstrap:

navbar-fixed-top as a class will keep it fixed in place. bootstrap navbar-fixed docs

4

This didn’t work. :frowning_face:

5

Lamentably, I am not using bootstrap. I’m going for plain CSS right now.

6

Here look at

#nav-bar{
	position: fixed;
	background: white;
	width: 95%;
	z-index: 10;
}

Added width and zindex and color to see it easy. Is this what you wanted to do?

1 Like
7

Yes, this worked! I am not sure why your older suggestion did not work. Thanks so much for your guidance!