Overflow question
So I've been trying to figure out a way to make my header semi-transparent while having it be sticky which I ended up figuring out but now content will overflow behind the header when the screen becomes small enough how can I avoid this? It only happens when I make the header position it ruins the entire page.
48 Replies
This is the codepen to the entire web code (The issue is only in the landing page, the very top)
it is caused u use position fixed
if u r tryna make it sticky then use sticky
why using fixed
Let me show you rq
When I use sticky the screen height enlarges in a way and adds a grey background, When I scroll down the header is still transparent I've tried changing the background color of that grey part but it ends up changing the transparent coloring as well.
find what causes dat grey bg
change it's color to match with the hero section
I've tried for the past day I have no idea, That's why I chose to com e here.
a walk around would be to use media query
keep the original position fixed
then use media query to make it change to sticky for smaller device
I see alright thanks man.
check from dev tool
also i don't think it's grey
it's white
i think it's the body
it LOOKS grey because of the semi transparent header
Alright, I'll keep that in mind.
this should fix it
I have a quick question, I was trying to fix it on my own right.
I added the some color gradient to the body and it ended up fixing it but it also caused the back ground color for a different section to change as well even though I've declared a color for that specific section. why would that happen?
most likely because dat different section doesn't have any bg color on it's own
so what u see is the bg of the body as the bg of dat section
by default most elements have bg pf transparent
I declared it to have a bg color of white tho?
show
update da codepen and show
👍
let me do it rq
which section is da issue
Oh yea lol
About
?
About Section
k
ya as I said above
transparent thing?
yes
u were seeing da bodies bg
here I explicitly gave the about section a bg
so u see cyan
if you were to copy the bg color from landing page then add a body {} with the same bg color it over laps it
at least when I did that happen
i do not see any body{...} in css
do this
and show
I had it removed I apologize I was just letting you know
k
Wait it works normally? Im so lost it was literally not working as intended earlier
if u did body{...} AFTER .AboutMeBG{..} then it's specificity issue
I placed the body at the top
right under the ::-webkit-scrollbar
actually no
not specificity
forget that
is it working now?
if so then well.. it's good
if it happens again share da code
It's working fine now?
is it?
Yea
which is odd, Just earlier it wasn't working as I wanted it to.
great
maybe I spelt the section name wrong in CSS, Apart from that Idk what could've happen.
I just needa figure out this header issue i've been tryna fix it for to long now
welcome to coding
you think it would be better if I used JS?
why would u
u don't need
use js when u need to style dynamically
that is when the style varies upon state
and even so many times it's still possible with css selectors
Why does code make ones life so much more difficult
¯\_(ツ)_/¯
it's just css being css
The entire coding experience is running into bs issues that can be fixed in the span of 40 minutes but realistically you've spent over an hour on it.
time to make a new question for more help.. Wahooo!
lol