modal appear behind fixed navbar

Question

so i have bootstrap based site with fixed navigation bar (that follow you around the page at the top) and when i want to show modal popup, it appear behind those navigation bar, how to fix?

and i using margo template from graygrids

it also appear in summernote modals for uploading picture, so it looks like all modal will appear behind those navigation bar.

Answer 1

To solve the problem I included in the CSS a super high z-index value (1000000) for the modal-backdrop (the shadow behind the modal), and a little bit higher one (1000001) for the modal:

  .modal-backdrop {
    z-index: 100000 !important;
  }

  .modal {
    z-index: 100001 !important;
  }

Hope it helps!

Answer 2

The navbar is fixed, meaning z-index is only relative to it's children. The simple fix is to simply increase the top margin on the outer modal container to push it down the page slightly and out from behind the navbar.

Otherwise, your modal markup has to sit in your header and you need to give it a higher z-index than the z-index of the parent navbar.