Kevin Powell - Community•14mo 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

ROP•14mo ago

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

hrphyn

CodePen

Help..

...

ROP•14mo ago

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

glutonium•14mo 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%;
}

ROP•14mo ago

Let me show you rq

ROP•14mo 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•14mo ago

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

ROP•14mo ago

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

glutonium•14mo 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

ROP•14mo ago

I see alright thanks man.

glutonium•14mo 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

ROP•14mo ago

Alright, I'll keep that in mind.

glutonium•14mo 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;
      }
    }
}

ROP•14mo 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•14mo 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

ROP•14mo ago

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

glutonium•14mo ago

show update da codepen and show

ROP•14mo ago

👍 let me do it rq

ROP•14mo ago

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

hrphyn

CodePen

Help..

...

glutonium•14mo ago

which section is da issue

ROP•14mo ago

Oh yea lol About

glutonium•14mo ago

ROP•14mo ago

About Section

glutonium•14mo ago

ya as I said above

ROP•14mo ago

transparent thing?

glutonium•14mo ago

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

ROP•14mo 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•14mo ago

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

ROP•14mo ago

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

glutonium•14mo ago

ROP•14mo ago

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

glutonium•14mo ago

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

ROP•14mo ago

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

glutonium•14mo 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

ROP•14mo ago

It's working fine now?

glutonium•14mo ago

is it?

ROP•14mo ago

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

glutonium•14mo ago

great

ROP•14mo 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•14mo ago

welcome to coding

ROP•14mo ago

you think it would be better if I used JS?

glutonium•14mo 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

ROP•14mo ago

Why does code make ones life so much more difficult

glutonium•14mo ago

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

ROP•14mo 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•14mo ago

lol

Gaming

Programming

Overflow question

Did you find this page helpful?