Kevin Powell - Community•9mo ago

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•9mo ago

https://codepen.io/hrphyn/pen/BabGwzJ

hrphyn

CodePen

Help..

...

RMON•9mo ago

This is the codepen to the entire web code (The issue is only in the landing page, the very top)

glutonium•9mo 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•9mo ago

Let me show you rq

RMON•9mo 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.

glutonium•9mo ago

find what causes dat grey bg change it's color to match with the hero section

RMON•9mo ago

I've tried for the past day I have no idea, That's why I chose to com e here.

glutonium•9mo 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•9mo ago

I see alright thanks man.

glutonium•9mo 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•9mo ago

Alright, I'll keep that in mind.

glutonium•9mo 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•9mo 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•9mo 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•9mo ago

I declared it to have a bg color of white tho?

glutonium•9mo ago

show update da codepen and show

RMON•9mo ago

👍 let me do it rq

RMON•9mo ago

https://codepen.io/hrphyn/pen/BabGwzJ

hrphyn

CodePen

Help..

...

glutonium•9mo ago

which section is da issue

RMON•9mo ago

Oh yea lol About

glutonium•9mo ago

RMON•9mo ago

About Section

glutonium•9mo ago

ya as I said above

RMON•9mo ago

transparent thing?

glutonium•9mo ago

yes u were seeing da bodies bg here I explicitly gave the about section a bg so u see cyan

RMON•9mo 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•9mo ago

i do not see any body{...} in css do this and show

RMON•9mo ago

I had it removed I apologize I was just letting you know

glutonium•9mo ago

RMON•9mo ago

Wait it works normally? Im so lost it was literally not working as intended earlier

glutonium•9mo ago

if u did body{...} AFTER .AboutMeBG{..} then it's specificity issue

RMON•9mo ago

I placed the body at the top right under the ::-webkit-scrollbar

glutonium•9mo 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•9mo ago

It's working fine now?

glutonium•9mo ago

is it?

RMON•9mo ago

Yea which is odd, Just earlier it wasn't working as I wanted it to.

glutonium•9mo ago

great

RMON•9mo 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•9mo ago

welcome to coding

RMON•9mo ago

you think it would be better if I used JS?

glutonium•9mo 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•9mo ago

Why does code make ones life so much more difficult

glutonium•9mo ago

¯\_(ツ)_/¯ it's just css being css

RMON•9mo 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•9mo ago

lol

Gaming

Programming

Overflow question