How to get top-bar container shadow to show up/take on top-level z-index?

[PixelRelish]

The drop shadow I applied -- via CSS, not Sass, per se, within custom-settings.scss, as I don't know how to add such writing in real Sass (yet) -- to top-bar-container only shows up once the sticky class kicks in (once the page has been scrolled, even an infitesimal amount). Tried various z-index hacks, but no luck.

Worked fine in my non-Sass version of the site, however I was having other issues, so I'm in the process of redoing the site using Sass (still have some custom CSS classes to write in Sass, hence currently still having a mixture of the two -- but no custom CSS on styles directly cited in foundation.scss/css, if that makes sense).

Ideas?

Workbench version of this in-progress site is at http://www.pixel-relish.com/wp2/ (please excuse the in-progress development formatting mess here and there)

[Luciaisacomputer]

If you make .top-bar-container position relative and with a z-index of 2 it looks like it fixes the issue, you'd have to find a way to remove those styles upon scrolling which should be easy to do.

[PixelRelish]

Interesting idea: I tried exactly that but using a high z (1000) and it didn't work. I will try the 2 later today and let you know. Thanks.

[FlatspinZA]

Jquery Waypoints can assign different CSS classes to objects based on scroll-positions, maybe worth a look?

[olefredrik]

@PixelRelish : make sure you apply the z-index value to the correct div class. I tried this, and it seemed to work just fine.

[Luciaisacomputer]

@PixelRelish the position: relative; is what is going to help the browser know how to stack things, so it could be that you just need to add that an any z-index.

[PixelRelish]

Perhaps the issue was that I was trying to write into custom-settings.scss and it seemed to be getting overwritten. (I did indeed add position: relative, too, in my original attempts.) If I add directly to foundation.css, won't the styles get overwritten when I later update FoundationPress? This is my first Sass site, so please excuse my ignorance. Do I write your above media="all"... styles into custom-settings.scss, say, near the bottom of the page (does order within the page even matter with scss the way it does with css (lower down the page overwrites higher up the page)? I guess not, that the importer dictates the actual final css order, yes?)

[PixelRelish]

Yes, that seems to have worked. No idea how I messed up something so simple. Thank you both for your help.

[Luciaisacomputer]

Any time, FoundationPress rules!