Kevin Powell - Community•16mo ago

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•16mo 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.

markshuggahOP•16mo 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•16mo 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%

markshuggahOP•16mo ago

thank you appreciate the help

Asmodeus•16mo ago

@markshuggah Why not change the z-index of the navbar to always be on top?

markshuggahOP•16mo ago

i have done that, i hav enavbar z index-1000, content 1 and bg 0

Asmodeus•16mo ago

So what is the current behavior? You'd want the z-index to be higher if it's on top Not lower.

markshuggahOP•16mo ago

the content is visible when it scrolls under the navbar with transparent background

briancross•16mo ago

The nav bar is transparent so it doesn't matter.

markshuggahOP•16mo ago

Sorry it's 1000 not -1000

Asmodeus•16mo 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

markshuggahOP•16mo ago

no way to fully cut the content off at the navbar?

Asmodeus•16mo ago

You want it to just disappear fully?

markshuggahOP•16mo ago

yup just as if the navbar was solid color and higher z index

Asmodeus•16mo ago

You can do that with parallax layouts, I'm not sure if there is an easier way, let me think about it.

briancross•16mo ago

@markshuggah you a Meshuggah fan by chance?

markshuggahOP•16mo ago

ohh yea

briancross•16mo ago

Haha me too

Asmodeus•16mo ago

I think you'll want to use the clip-path property

markshuggahOP•16mo ago

let me try that

briancross•16mo ago

Now that’s a good idea.

Asmodeus•16mo ago

Link me to some good shite right now @markshuggah I need some good pig squealing right now.

markshuggahOP•16mo ago

https://www.youtube.com/watch?v=-kPEbV8T35k

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

Ty Hell yeah.

markshuggahOP•16mo ago

3:30 to the end is disgusting

Asmodeus•16mo ago

I love me some filth. I've got to teach myself react in like 4 days, damn.

briancross•16mo ago

Nice 🤘

Asmodeus•16mo ago

Definitely possessed at 3:30+ Good stuff

Gaming

Programming

Scoll issues with sticky nav bar and hero image