[SOLVED] How to fix a z-index issue in Bootstrap?

Issue

I am designing this landing using Bootstrap and my own code. As you can see the main menu it’s not showing all the content above the HTML. This is the CSS.

How do I fix this issue? I think that it is a z-index problem. Am I right?

Here is the original menu code.

THANKS

Here is part of the css menu code:

/*----------ESTILOS MENU -----------*/
  .menuBtn {
    height: 30px;
    width: 30px;
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 101;
  }
  .menuBtn > span {
    background-color: var(--color-primario);
    height: var(--altura-linea);
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -1px 0 0 -15px;
    transition: height 100ms;
  }
  .menuBtn > span:after,
  .menuBtn > span:before {
    content: '';
    background-color: var(--color-primario);
    height: var(--altura-linea);
    width: 100%;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    transition: all 200ms;
  }
  .menuBtn > span:after {
    top: -7px;
  }
  .menuBtn > span:before {
    bottom: -7px;
  }
  .menuBtn.act > span {
    height: 0;
  }
  .menuBtn.act > span:after,
  .menuBtn.act > span:before {
    background-color: #008877;
    top: 1px;
  }
  .menuBtn.act > span:after {
    transform: rotate(45deg);
  }
  .menuBtn.act > span:before {
    transform: rotate(-45deg);
  }
  /* main menu block */
  .mainMenu {
    background-color: var(--color-blanco);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    height: 100%;
    width: 100%;
    display: table;
    text-align: center;
    opacity: 0;
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: scale(0);
  }
  .mainMenu.act {
    opacity: 1;
    transform: scale(1);
  }
  .mainMenu.act ul li {
    opacity: 1;
    transform: translateX(0);
  }
  .mainMenu ul {
    display: table-cell;
    vertical-align: middle;
  }
  .mainMenu li {
    padding: 8px 0;
    transition: all 400ms 510ms;
    opacity: 0;
  }
  .mainMenu li:nth-child(odd) {
    transform: translateX(30%);
  }
  .mainMenu li:nth-child(even) {
    transform: translateX(-30%);
  }
  .mainMenu li:last-child {
    transform: none;
  }
  .mainMenu a {
    color: #19b698;
    display: inline-block;
    font-size: 18px;
  }
  .mainMenu a.suBtn {
    color: var(--color-blanco);
  }

  .act{
    background-color: red;
  }

Solution

please update your css like this

/*----------ESTILOS MENU -----------*/
      .menuBtn {
        height: 30px;
        width: 30px;
        position: absolute;
        right: 20px;
        top: 10px;
        z-index: 101;
      }
      .menuBtn > span {
        background-color: var(--color-primario);
        height: var(--altura-linea);
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -1px 0 0 -15px;
        transition: height 100ms;
      }
      .menuBtn > span:after,
      .menuBtn > span:before {
        content: '';
        background-color: var(--color-primario);
        height: var(--altura-linea);
        width: 100%;
        position: absolute;
        left: 50%;
        margin-left: -15px;
        transition: all 200ms;
      }
      .menuBtn > span:after {
        top: -7px;
      }
      .menuBtn > span:before {
        bottom: -7px;
      }
      .menuBtn.act > span {
        height: 0;
      }
      .menuBtn.act > span:after,
      .menuBtn.act > span:before {
        background-color: #008877;
        top: 1px;
      }
      .menuBtn.act > span:after {
        transform: rotate(45deg);
      }
      .menuBtn.act > span:before {
        transform: rotate(-45deg);
      }
      /* main menu block */
      .mainMenu {
        background-color: var(--color-blanco);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
        height: 100%;
        width: 100%;
        display: table;
        text-align: center;
        opacity: 0;
        transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transform: scale(0);
      }
      .mainMenu.act {
        opacity: 1;
        transform: scale(1);
      }
      .mainMenu.act ul li {
        opacity: 1;
        transform: translateX(0);
      }
      .mainMenu ul {
        display: table-cell;
        vertical-align: middle;
      }
      .mainMenu li {
        padding: 8px 0;
        transition: all 400ms 510ms;
        opacity: 0;
      }
      .mainMenu li:nth-child(odd) {
        transform: translateX(30%);
      }
      .mainMenu li:nth-child(even) {
        transform: translateX(-30%);
      }
      .mainMenu li:last-child {
        transform: none;
      }
      .mainMenu a {
        color: #19b698;
        display: inline-block;
        font-size: 18px;
      }
      .mainMenu a.suBtn {
        color: var(--color-blanco);
      }
    
      .act{
        background-color: red;
      }

Answered By – Roman Gavrilov

Answer Checked By – Pedro (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *