My sticky nav bar not sticking and out of position
I want the nav to be on top of the upper part of the background, yet I want it to be sticky as well. I tried moving the nav inside of the hero section, but that only allowed it to stick to the hero section, and then after scrolling past there, it disappeared. What is the most responsive solution to this. Thank you!
https://codepen.io/Donald-Rankin/pen/NWJqaVb
11 Replies
In the nav element, declare top: 0, left: 0 (this tells it where to stick to), and background: (whatever color).
nav {
grid-area: nav;
position: sticky;
width: 100vw;
height: 10vh;
font-size: 32px;
text-shadow: 2px 5px 3px black;
top: 0;
left: 0;
background: red;
}
You can remove width declaration though, its a grid area. I'd also recommend removing the height declaration and instead give it padding.
nav {
grid-area: nav;
position: sticky;
top: 0;
left: 0;
font-size: 32px;
text-shadow: 2px 5px 3px black;
background: red;
padding: 9px 0;
}
Sweet! Not only did you tell me why it was not sticking but you explained why it works. Thanks! I learned something new! Now the only issue is I do not want it to have it's own background. I was hoping that the top of the photo I used as the background for that grid area of hero. Is there any way to do that?
Oh! The padding was a much better option as well! Thanks!
Of course I won't need it if I can get it to do what I am aiming for.
Sorry I meant I want the background for the nav to be the top area of that photo until it begins to scroll.
Apply that styling and remove the background declaration. Then scroll, and you will see why the sticky element needs a background declaration. Since the container of it doesn't have a background declared, it is transparent. So you can see through it, but the element itself will float above all other content. And without a background declared, it ends up obstructing elements under it.
Okay that makes sense thanks
I'll get to work on figuring out what I want
In body you also have declared overflow-x: hidden, but it is overflowing on X axis because of the 100vw width declaration of the nav
If you remove that you can remove them both
Oh cool thanks
To do that, I would add a class (with the background color declared on that class instead) to nav after the scroll position gets to a certain point that you declare. But that would need JavaScript in order to do that.
I'm not quite in JS yet. I have applied to a job that only requires HTML and CSS. I'm working on this page to impress them with my minimal skills. Ha ha. I need something pretty quick as I have 4 kids by myself. Even if it isn't much money anything at the moment would be helpful. So I'm going to attempt for this one, but I won't be surprised if they turn me down.
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
This is just real quick to show you
Line 43 of the CSS says what color it will be once that class is applied to it. Though this code only adds the class after scrollY position from the top is 100, and doesn't remove it.
But note there is white space behind the nav (which is actually the body background color) - that's because of the grid declaration for it taking up that row, before hero.
Yeah I tried removing it and it got sent off to the side somewhere I think. I like your point of it clashing with other elements and needing a background better though