Menu icon Foundation
Orbit slider z-index problems

I currently have a navigation bar and an orbit slider directly under it. My navigation bar has a couple drop down menus, however the orbit slider covers up those drop down sections. I've tried making the nav section have a z-index of 50 and the orbit slider be surrounded with a div that had a z-index of 20. That didn't work, So can someone help me figure this out. Oh by the way i'm using groovy grails.

orbit sliderz-index

I currently have a navigation bar and an orbit slider directly under it. My navigation bar has a couple drop down menus, however the orbit slider covers up those drop down sections. I've tried making the nav section have a z-index of 50 and the orbit slider be surrounded with a div that had a z-index of 20. That didn't work, So can someone help me figure this out. Oh by the way i'm using groovy grails.

James W. Lane almost 5 years ago

Make sure your menu's ul has a position relative or absolute.
Then try giving it a z-index of 99.

If you could give us a link I could better inspect the styling and see if something catches my eye on what else could be causing it.

Darrell MacLennan almost 5 years ago

Hi, I had the same problem. The dropdown shows on top of the orbit slider on page load, before the next image in the slider loads, then goes behind the the slider as soon as the next image changes.

I changed the z-index on the topbar element.

.top-bar {
z-index: 99 ;
}

This works.