afifnandya afifnandya - 3 months ago 14
CSS Question

"z-index" on Bootstrap navbar and dropdown

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 enough 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:

Shopping Cart Screenshot

Here is the working jsfiddle:

https://jsfiddle.net/nmdh5vmv/2/

Answer

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;
}
Comments