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
RMON
RMON9mo ago
This is the codepen to the entire web code (The issue is only in the landing page, the very top)
glutonium
glutonium9mo ago
it is caused u use position fixed if u r tryna make it sticky then use sticky why using fixed
header {
background: linear-gradient(to left, hsla(222, 92%, 5%, 0.6), hsla(0, 0%, 12%, 0.6));
position: sticky;
top: 0;
left:0;
width: 100%;
}
header {
background: linear-gradient(to left, hsla(222, 92%, 5%, 0.6), hsla(0, 0%, 12%, 0.6));
position: sticky;
top: 0;
left:0;
width: 100%;
}
RMON
RMON9mo ago
Let me show you rq
RMON
RMON9mo ago
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.
No description
glutonium
glutonium9mo ago
find what causes dat grey bg change it's color to match with the hero section
RMON
RMON9mo ago
I've tried for the past day I have no idea, That's why I chose to com e here.
glutonium
glutonium9mo ago
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
RMON
RMON9mo ago
I see alright thanks man.
glutonium
glutonium9mo ago
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
RMON
RMON9mo ago
Alright, I'll keep that in mind.
glutonium
glutonium9mo ago
this should fix it
header {
background: linear-gradient(to left, hsla(222, 92%, 5%, 0.6), hsla(0, 0%, 12%, 0.6));
position: fixed;
top: 0;
left:0;
width: 100%;

@media screen and (width < 1000px){
&{
position: sticky;
}
}
}
header {
background: linear-gradient(to left, hsla(222, 92%, 5%, 0.6), hsla(0, 0%, 12%, 0.6));
position: fixed;
top: 0;
left:0;
width: 100%;

@media screen and (width < 1000px){
&{
position: sticky;
}
}
}
RMON
RMON9mo ago
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?
glutonium
glutonium9mo ago
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
RMON
RMON9mo ago
I declared it to have a bg color of white tho?
glutonium
glutonium9mo ago
show update da codepen and show
RMON
RMON9mo ago
👍 let me do it rq
glutonium
glutonium9mo ago
which section is da issue
RMON
RMON9mo ago
Oh yea lol About
glutonium
glutonium9mo ago
?
RMON
RMON9mo ago
About Section
glutonium
glutonium9mo ago
k
glutonium
glutonium9mo ago
No description
glutonium
glutonium9mo ago
No description
glutonium
glutonium9mo ago
ya as I said above
RMON
RMON9mo ago
transparent thing?
glutonium
glutonium9mo ago
yes u were seeing da bodies bg here I explicitly gave the about section a bg so u see cyan
RMON
RMON9mo ago
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
glutonium
glutonium9mo ago
i do not see any body{...} in css do this and show
RMON
RMON9mo ago
I had it removed I apologize I was just letting you know
glutonium
glutonium9mo ago
k
RMON
RMON9mo ago
Wait it works normally? Im so lost it was literally not working as intended earlier
glutonium
glutonium9mo ago
if u did body{...} AFTER .AboutMeBG{..} then it's specificity issue
RMON
RMON9mo ago
I placed the body at the top right under the ::-webkit-scrollbar
glutonium
glutonium9mo ago
actually no not specificity forget that is it working now? if so then well.. it's good if it happens again share da code
RMON
RMON9mo ago
It's working fine now?
glutonium
glutonium9mo ago
is it?
RMON
RMON9mo ago
Yea which is odd, Just earlier it wasn't working as I wanted it to.
glutonium
glutonium9mo ago
great
RMON
RMON9mo ago
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
glutonium
glutonium9mo ago
welcome to coding
No description
RMON
RMON9mo ago
you think it would be better if I used JS?
glutonium
glutonium9mo ago
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
RMON
RMON9mo ago
Why does code make ones life so much more difficult
glutonium
glutonium9mo ago
¯\_(ツ)_/¯ it's just css being css
RMON
RMON9mo ago
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!
glutonium
glutonium9mo ago
lol
Want results from more Discord servers?
Add your server