This project is read-only.

top nav overlaps preview box when clicking an item in a list

Oct 16, 2014 at 3:43 PM
I tried searching for an existing discussion or issue but could not find one.

I played around with z-index on the top nav and on the preview box without success.

Image
Oct 16, 2014 at 4:06 PM
I see changing the navbar z-index fixes my issue but then causes the top nav drop downs to not overlap.

.navbar {
z-index: 1;
border: none;
margin-bottom: 5px;
}

Thinking I need to change the positioning of the preview box, for example have it appear lower so the first will clear the top nav bar, what that CSS is, TBD.
Coordinator
Oct 16, 2014 at 5:11 PM
You can try increasing the z-index of the hover panel, but I can see there may be cross browser issues.

Normally the top nav will have a higher z-index than the body content below it so that nav dropdowns appear over the content. The hover panel in the content area will cause you problems. Modern browsers though respect z-index more closely than did older version of IE.

Therefore, set the z-index for .navbar to 50 or 100, then change the z-index of the hover panel to say 200 or higher.

Eric
Oct 16, 2014 at 8:10 PM
Thanks for the reply. The z-index ideas did not work for me. I ended changing the position of the callout box on staging. So far so good with testing.

.js-callout-mainElement {
top: 100px;
}