I’m using Foundation on this site: https://www.thearthouseoasis.com/
My topbar drop downs are dropping BEHIND the next stacks down, rather than IN FRONT. I’m attaching a couple of screen grabs to show what I mean. On the ‘blog, news’ page the Home tab dropdown has slipped behind my image stack below it, and on the ‘acrylic paint pouring’ screen grab you can’t see any of the drop down items at all. So I’m just wondering if a simple stack where I can tweak the z-index would be an easy fix. What do you reckon?
You didn’t say which version of foundation.
But the why is probably because it has a lower z-index setting than the stacks that are covering it.
If you are using Foundation 6, do you have overflow visible set on the container containing the Topbar?
Thanks for getting back to me Scott :-). I’m using Foundation 1.8.12 and the Topbar is in an animate stack inside a partial. I don’t see an ‘overflow’ option on either of those stacks.
Right, the overflow setting is only in F6.
you can inspect the element in your browser and see what to target then use CSS to change the z-index of top-bar (or animate if that’s what is causing it) or lower the z-index on the element that is covering it. I’m on mobile at the moment so I can’t look for you.
Yes I tried that as a test on the homepage. I thought that this might work having had a browse through other posts, but it hasn’t worked:
.top-bar-section .dropdown{
z-index:1999!important;
}
Ah sorry I forgot to say, I’m only seeing this issue on my ipad, not my desktop, does that help?
It’s the animate stack that is doing that. Take Top Bar out and its all fixed.
1 Like
Thank you!!! Brilliant :-)))
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.