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

RMONOP•10mo ago

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

hrphyn

CodePen

Help..

...

RMONOP•10mo ago

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

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

RMONOP•10mo ago

Let me show you rq

RMONOP•10mo 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•10mo ago

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

RMONOP•10mo ago

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

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

RMONOP•10mo ago

I see alright thanks man.

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

RMONOP•10mo ago

Alright, I'll keep that in mind.

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

RMONOP•10mo 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•10mo 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

RMONOP•10mo ago

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

glutonium•10mo ago

show update da codepen and show

RMONOP•10mo ago

👍 let me do it rq

RMONOP•10mo ago

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

hrphyn

CodePen

Help..

...

glutonium•10mo ago

which section is da issue

RMONOP•10mo ago

Oh yea lol About

glutonium•10mo ago

RMONOP•10mo ago

About Section

glutonium•10mo ago

ya as I said above

RMONOP•10mo ago

transparent thing?

glutonium•10mo ago

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

RMONOP•10mo 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•10mo ago

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

RMONOP•10mo ago

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

glutonium•10mo ago

RMONOP•10mo ago

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

glutonium•10mo ago

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

RMONOP•10mo ago

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

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

RMONOP•10mo ago

It's working fine now?

glutonium•10mo ago

is it?

RMONOP•10mo ago

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

glutonium•10mo ago

great

RMONOP•10mo 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•10mo ago

welcome to coding

RMONOP•10mo ago

you think it would be better if I used JS?

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

RMONOP•10mo ago

Why does code make ones life so much more difficult

glutonium•10mo ago

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

RMONOP•10mo 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•10mo ago

lol

Gaming

Programming

Overflow question