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