Weird "fixed" behavior on my site

Hey All,

I hope someone can help me. I am creating a site that has a fixed navbar but it sits behind the hero image so it becomes visible after that section. I did this using the Z index as i described in another post. I have done this before with no issues but this time the hero image keeps disappearing randomly and I have to log out and log back in multiple times to reset it. The hero image is also set to be fixed and it isn’t staying fixed, it keeps switching between fixed and static. What is going on?


https://webflow.com/design/canalalarmdevices?preview=d16b3bddc7a82c557e7ab89da16d8517

Thanks,
Dave

Hey Dave,

What’s the intended behavior? For the content section to roll over the header section when you scroll down? You have your header section Position: Absolute and your background image Fixed. I’d remove the fixed from the image and only have the header section have Fixed. (If you have both fixed then Chrome goes crazy). Then give it a low z-index so other content will roll over it (with a higher z-index). Then you’ll have to give you content section a really large top padding to push it off the top (because Fixed elements don’t flow with the document), a Position: Relative and a higher z-index (and a background color), so when you scroll it will roll over.

Try that.

I want to create a navbar that appears only after the first section. You cant do that in webflow without extra code. This is my workaround. I want the navbar to be behind the top image until it reaches the next section. I don’t know what you are talking about header and background image, you need to specify which elements you are talking about.

Oh I see what you’re trying to do. You can do it like this then:

preview: http://canalalarmdevices3121148.webflow.com/
public link: https://webflow.com/design/canalalarmdevices3121148?preview=57042d3cdcbd9d33eb333c38dbdc7153

Wow, the version I’m seeing is all messed up in the public link. It keeps showing the background for the whole page and I cant select any elements. Is there an issue with chrome Version 33.0.1750.149?? This is seriously freaking out on me.

I copied all the settings over and its still freaking out when I scroll down and scroll back up. Also the hero image will not be static like in your version even though the settings are the same. Did I miss something? https://webflow.com/design/canalalarmdevices?preview=d16b3bddc7a82c557e7ab89da16d8517

Ooops, sorry @DFink. I was editing the site and didn’t think that you’d be looking at it. My bad! Let me fix her up and get back to you.

Nevermind it was my fault. I had nested classes for both the hero image and the navbar that were conflicting. Giving the navbar section a unique class fixed it. Thanks for your help. I need to go clean up my styles now.