Parallax Effected by CSS

Resolved angeladesign
(@angeladesign)

10 years, 7 months ago
Hello.
Need help… This code was added to make the header images including the slider on the homepage to move up under the header area. But the absolute position causes the slider parallax to not work. Suggestions or solutions would be most appreciated: http://buildings.techmatemn.com/
```
.gch-header {
    position: absolute;
    top: 0;
    z-index: -1;
}
```
https://ww.wp.xz.cn/plugins/genesis-custom-headers/

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Nick Diego
(@ndiego)

10 years, 7 months ago

Hi Angela,

This is a CSS issue that should be easily resolve albeit with some heavy tweaking and probably some CSS hacks. Parallax is always tricky. I am not sure how much I can help, but what is your desired outcome? Do you want the main header slider/image to be fixed even as you scroll? If so, start by changing position:absolute to position:fixed. That might get you on the right path.

Nick

Thread Starter angeladesign
(@angeladesign)

10 years, 7 months ago

I’m using a slider plugin that has parallax attached to the text so it moves with your mouse, but by having the position:absolute attached to the .gch-header container it blocks the effect. Make sense? If you use firebug to remove the css; position:absolute — the parallax works! Also tried changing it to fixed with no luck. Any more thoughts would be most appreciated; thanks!

Angela

Plugin Author Nick Diego
(@ndiego)

10 years, 7 months ago

Hi Angela,

My only other suggestion would be to float the header over the slideshow instead of trying to move the slideshow under the header. So position the slider above the header, and then position the header, using position: absolute, so it goes above. You may have to adjust the positioning on the items within the header for this to work.

I discovered that it is not an issue with the positioning, rather the z-index. If you are in fire-bug and turn off the z-index, then the parallax effect works fine. The slider seems finicky when you put markup on top of it.

Hope this helps,
Nick

Thread Starter angeladesign
(@angeladesign)

10 years, 7 months ago

Thanks! Problem solved.

Plugin Author Nick Diego
(@ndiego)

10 years, 7 months ago

Great, I am glad it worked.

Best,
Nick

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Parallax Effected by CSS’ is closed to new replies.