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
briancross
briancross15mo ago
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:
width: 90%;
max-width: 1200px;
margin: 0 auto;
width: 90%;
max-width: 1200px;
margin: 0 auto;
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.
markshuggah
markshuggah15mo ago
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
briancross
briancross15mo ago
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%
markshuggah
markshuggah15mo ago
thank you appreciate the help
Asmodeus
Asmodeus15mo ago
@markshuggah Why not change the z-index of the navbar to always be on top?
markshuggah
markshuggah15mo ago
i have done that, i hav enavbar z index-1000, content 1 and bg 0
Asmodeus
Asmodeus15mo ago
So what is the current behavior? You'd want the z-index to be higher if it's on top Not lower.
markshuggah
markshuggah15mo ago
the content is visible when it scrolls under the navbar with transparent background
No description
briancross
briancross15mo ago
The nav bar is transparent so it doesn't matter.
markshuggah
markshuggah15mo ago
Sorry it's 1000 not -1000
Asmodeus
Asmodeus15mo ago
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
markshuggah
markshuggah15mo ago
no way to fully cut the content off at the navbar?
Asmodeus
Asmodeus15mo ago
You want it to just disappear fully?
markshuggah
markshuggah15mo ago
yup just as if the navbar was solid color and higher z index
Asmodeus
Asmodeus15mo ago
You can do that with parallax layouts, I'm not sure if there is an easier way, let me think about it.
briancross
briancross15mo ago
@markshuggah you a Meshuggah fan by chance?
markshuggah
markshuggah15mo ago
ohh yea
briancross
briancross15mo ago
Haha me too
Asmodeus
Asmodeus15mo ago
I think you'll want to use the clip-path property
markshuggah
markshuggah15mo ago
let me try that
briancross
briancross15mo ago
Now that’s a good idea.
Asmodeus
Asmodeus15mo ago
Link me to some good shite right now @markshuggah I need some good pig squealing right now.
markshuggah
markshuggah15mo ago
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...
Asmodeus
Asmodeus15mo ago
Ty Hell yeah.
markshuggah
markshuggah15mo ago
3:30 to the end is disgusting
Asmodeus
Asmodeus15mo ago
I love me some filth. I've got to teach myself react in like 4 days, damn.
briancross
briancross15mo ago
Nice 🤘
Asmodeus
Asmodeus15mo ago
Definitely possessed at 3:30+ Good stuff
Want results from more Discord servers?
Add your server