Product Flags overlay dropdown menu

[lesliekirk]

If you go to this category page and then click on the Ornaments menu tab, notice how all of the "NEW" tabs overlay the the drop down menu? The first thing I went and checked were the Z-Indexes of each. Granted I may have missed something but the best I can tell the menu is

.navigation-set li ul {z-index: 999;}

and the flag

.flag::before {z-index: 10;}
.flag::after {z-index: 11;}

Shouldn't the Z-Index of the menu be "hiding" these?

FWIW - the Z-Index of the Quick View button is

.quick-view {z-index: 15;}

I'm wondering if the Z-Index for the Flags is needed at all because if I comment out the Z-Indexes, it displays as expected. Odd...

[lesliekirk]

Bump, bump, bump, BUMP, crash...

Awww come on now, nobody?

[Nick]

Leslie,

Technically the Quick View is not being hidden by the z-index but rather by the CSS. When you hover over the Quick View while the navigation is down the Quick View will appear.

The issue is the z-index that is on the .navigation-bar is set to a value of 1 so that is deciding index. You can increase that value or set your flags to 0 to fix the issue.

[lesliekirk]

Thanks Nick. That helped me to finally fix it.

[Bruce - PhosphorMedia]

also looks like the sizing control needs a bit of love. for example


border-width: 0px 0px 85px 85px;

instead of


border-width: 0px 0px 75px 75px;

(that was on Win Chrome, may need to verify on IOS for best compremise.