Estoy diseñando este aterrizaje usando Bootstrap y mi propio código. Como puede ver, el menú principal no muestra todo el contenido sobre el HTML. Este es el CSS .
¿Cómo soluciono este problema? Creo que es un problema de índice z. ¿Tengo razón?
Aquí está el código del menú original .
GRACIAS
Aquí hay parte del código del menú css:
/*----------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; }por favor actualice su css así
/*----------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; }