"z-index" on Bootstrap navbar and dropdown

Question

I have a problem in my navbar dropdown and cart dropdown.

I'm not sure how to fix this (I don't have solid knowledge about css z-index).

What I want is the shopping cart menu dropdown to stay on top of navbar menu dropdown.

I have changed the z-index on both dropdown menus and doesn`t work.
Thanks.

Here is the image:

Here is the working jsfiddle:
https://jsfiddle.net/nmdh5vmv/2/

Answer 1

you need to asign to shopping cart menu dropdown a z-index bigger than z-index of navbar menu dropdown

.mega-dropdown-menu{
  z-index: 1;
}

.shopping-whist-bag{
  z-index: 2;
}