Scoll issues with sticky nav bar and hero image
I am creating a website for my band: https://denounced-disgraced-git-feat-press-kit-updates-markmullins95.vercel.app/press
When the content scrolls, it is visible under the navbar. I want it to cut off when it goes beneath the navbar.
Also, I tried adding a margin / padding to the content in the div that contains the content, (class "sc-9caaeffa-1 gRLorz" in this case) and for some reason only margin left works at smaller screen sizes. I believe this is because of width: 100% but I am not sure.
Denounced Disgraced
Denounced Disgraced, Charleston SC
28 Replies
I would have the nav bar blur the content scrolling underneath it on scroll or change it to a solid background or something. Not sure how you'd have it disappear below it when it's transparent to show the bg image.
For the main section, I normally do something like:
to center the content and not have it super wide on desktop screens.
Also you might want to remove the
overflow-y
on the content div. It's got a scrollbar when I look at it on my laptop.so there's no way to have the content scroll under the navbar and have it disappear? I just want the Bg image to be under both
I tried that once and gave up. Maybe someone else will have a solution but I didn't have success.
Other things I'd do are change the nav position to sticky and get rid of the
width: 100%
thank you appreciate the help
@markshuggah Why not change the z-index of the navbar to always be on top?
i have done that, i hav enavbar z index-1000, content 1 and bg 0
So what is the current behavior?
You'd want the z-index to be higher if it's on top
Not lower.
the content is visible when it scrolls under the navbar with transparent background
The nav bar is transparent so it doesn't matter.
Sorry it's 1000 not -1000
Ok, you can get the navbar to blur.
Look at my page, information.coffee, and scroll down and see if that's what you want.
my navbar is also transparent
no way to fully cut the content off at the navbar?
You want it to just disappear fully?
yup
just as if the navbar was solid color and higher z index
You can do that with parallax layouts, I'm not sure if there is an easier way, let me think about it.
@markshuggah you a Meshuggah fan by chance?
ohh yea
Haha me too
I think you'll want to use the clip-path property
let me try that
Now that’s a good idea.
Link me to some good shite right now @markshuggah
I need some good pig squealing right now.
Century Media Records
YouTube
SIGNS OF THE SWARM - Amongst the Low & Empty (OFFICIAL VIDEO)
SIGNS OF THE SWARM - Amongst the Low & Empty (OFFICIAL VIDEO)
Taken from the album ‘Amongst the Low & Empty’ — Pre-Order:
https://signsoftheswarm.com/ATLAE-preorders
Listen+Add to Playlist: https://signsoftheswarm.com/ATLAE
Listen+Watch New Groovy-Yet-Gory Single TOWER OF TORSOS: https://signsoftheswarm.com/torsos
Grab Merch:
US: https://www.i...
Ty
Hell yeah.
3:30 to the end is disgusting
I love me some filth.
I've got to teach myself react in like 4 days, damn.
Nice 🤘
Definitely possessed at 3:30+
Good stuff