How do I get rid of this annoying thing!
I've been trying to figure this issue out for about 2 days and I literally have no idea what's wrong. Regarding the header when I make it somewhat transparent behind it there's a weird coloring does anyone know why?
20 Replies
the empty white space you see when I do end up styling it to be a specific color it ends up messing with the header coloring as well thats sticky
That extra coloring that in my opinion shouldnt belong there gets effected and I have no real idea how to fix it
I ended up updating the issue, I'll try to explain what's happening to the best of my abilities.
Pretty much what Im running into is when the user scrolls down slightly there's a gray area at the top of the screen I used some JS to simply make a header color transition I want the header to be the same color as the landing page then become transparent enough where the user can see through it. I've managed to do that but now when the user scrolls the smallest bit they can see an empty gray area where the original header is.
Default Look
When User Scrolls Just A Little
on the header seems to fix it
So just add these two to the header?
yeah change position: sticky to position: fixed and add width: 100vw, don't know why sticky cause that bug
:l
Theres no shot
I've been trying to fix this issue since yesterday afternoon ðŸ˜
you're telling me thats all I needed?
ahahah i get you, sometimes you just need another point of view
Well, Thank you so much man literal life saver
you are welcome :) if you still get problem with this tag me here
People have said and litearlly my coding teacher said one of the most annoying thing in coding is when you find out the issue you've been dealing with is the smallest fix.
yeah the classic missing ; is a nightmare
that's why a nice developer have to know how to google or how to ask questions, and that's why im liking this community, a lot of help
Yea I 100% agree man
Without this community I don't know where the hell I'd be.
you could also put that gradient background on the body tag since that white background color comes from there 😉
Elaborate if you can please, I have a decent idea of what you're saying but how would that really help?
by default your page has white background and that is what you see when you scroll and lower the opacity of your header. So you need to change the background-color of the body if you want to eliminate that white background. You can either use the gradient or just plain black or blackish color on body element or you can add
color-scheme:dark on the html element but that will also change the the look of input element etc.I see, Alrigh thanks for the info Mannix!