Z-index shenanigans: Chroma, SP, Foundry Menu

I can’t get the content on the page to sit behind the menu ion this dev site: https://ci-clientservices.com/clientdev/stems/

If you scroll down you get to some content with text left and the logo right, it’s floating over the menu. I’ve tried everything!




.blu-wrap.bwd>.blueprint-col>.blucol-content[class*="style-pro-stacks"].has-z { z-index: 0; }

1 Like

Thanks Geoff, but fixed it in the end by rebuilding the header section.

But… Now I’m getting a white margin down the right on all pages. It disappear once the page is resized slightly. Looks like the attached image.

Anyone else getting it?

Fixed it.

Put the Chroma stack inside the Sp and used the code @Geoff supplied.

Thanks Geoff.

There is a setting in BluePrint that sets the z-index to auto

1 Like

As ever, tav is correct - I thought it might be a Foundry thing so gave you a convoluted solution to an easy fix.

I’ll get my coat…

The has-z class is only added when certain settings (can’t remember which) are enabled so it is better to switch it off than override it for every stack on the page.

Tip of the week: if you do want to override something then give It a custom class and just override the one that is problematical rather than every one on the page which can mess up other layouts.

Also - if you get into a situation like that then it is almost certain that the layout is wrong or unnecessarily nested. There should be no need at all to have Chroma inside anything else for a simple header setup like that. Try and keep things simple and don’t overcomplicate to find a solution - simplify instead.


@Geoff not at all - just make sure your CSS is scoped using a custom class.

Anyway, I am back at the computer now and so I have found the setting. @steveb It is
Advanced>Background in front of page cover
that you need to turn off

That setting can always be off if you are using Foundry. It is only there to stop Blueprint backgrounds going behind the Foundation cover image which is actually a div of its own (vegas.js slideshow) and hides the background and overlays of CSS backgrounds.



p.s. I am going to change the default state of that checkbox to off in the next update.

Brill, thanks Tav.

I also found that adding a advanced positioning child fixed it, but obviously unticking that box is a cleaner solution.

Cheers all.