I am having 2 CSS files one for mega menu and another for the theme, but only when i see the menu in mobile it is going behind other elements, unable to get it on top of all the layers, all other layers are done using bootstrap3
Kindly help
Kindly help
CSS:
.mobile-menu-trigger,
.mobile-menu-header,
.mobile-menu-back-item {
display: none;
}
}
@media all and (max-width: 950px) {
.nav {
padding: 20px;
}
.mobile-menu-trigger,
.mobile-menu-header,
.mobile-menu-back-item {
display: block;
}
.mobile-menu-trigger {
background: #177E89;
color: #ffffff;
border: 0;
padding: 10px;
font-size: 1.2em;
border-radius: 4px;
}
.mobile-menu-header {
order: -1;
background: grey;
}
.mobile-menu-header a {
padding: 20px 25px;
color: #ffffff;
visibility: visible;
}
.menu-bar {
flex-direction: column;
position: fixed;
top: 0;
left: -100%;
height: 100vh;
width: 350px;
max-width: 350px;
max-width: 90%;
overflow-x: hidden;
transition: left 0.3s;
box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.25);
}
.menu-bar > li > [aria-haspopup="true"] ~ ul {
display: flex;
flex-direction: column;
background: #ffffff;
position: absolute;
left: 100%;
top: 0;
max-height: 100vh;
width: 100%;
transition: left 0.3s;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] {
font-size: 1.2em;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] ~ ul a {
padding-left: 40px;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] ~ ul a {
padding-left: 80px;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"] {
color: #2a2a2a;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"]:after {
content: "+";
background: none;
font-size: 1em;
font-weight: normal;
height: 20px;
line-height: 1;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"] ~ ul {
max-height: 0px;
transform-origin: top;
transform: scaleY(0);
transition: max-height 0.1s;
}
.mega-menu-content {
padding: 20px 25px;
}
.mobile-menu-back-item {
order: -1;
}
.mobile-menu-back-item a {
background: #d9d9d9;
color: #2a2a2a;
max-height: calc(1.4em + 40px);
margin-top: calc(0px - (1.4em + 40px));
pointer-events: none;
}
.mobile-menu-back-item a:before {
content: "";
width: 14px;
height: 12px;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowLeft.svg#default');
background-size: 14px;
margin-right: 10px;
display: inline-block;
}
.mobile-menu-trigger:focus ~ ul {
left: 0;
}
.menu-bar:hover,
.menu-bar:focus-within {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"]:focus ~ ul {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul {
margin-top: calc(1.4em + 40px);
}
.menu-bar > li > [aria-haspopup="true"] ~ ul:hover,
.menu-bar > li > [aria-haspopup="true"] ~ ul:focus-within {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"]:focus ~ ul {
max-height: 500px;
animation: dropdown 0.3s forwards;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul li:focus-within > [aria-haspopup="true"] ~ ul {
max-height: 500px;
transform: scaleY(1);
}
.menu-bar > li:focus-within ~ .mobile-menu-header a {
visibility: hidden;
}
}
@media all and (max-width: 950px) and (hover: none) {
.mobile-menu-trigger:hover ~ ul {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"]:hover ~ ul {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul:hover {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"]:hover ~ ul {
max-height: 500px;
animation: dropdown 0.3s forwards;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"] ~ ul:hover {
max-height: 500px;
transform: scaleY(1);
}
.menu-bar > li:hover ~ .mobile-menu-header a {
visibility: hidden;
}
}
@keyframes dropdown {
0% {
opacity: 0;
transform: scaleY(0);
}
50% {
opacity: 1;
}
100% {
transform: scaleY(1);
}
}
@keyframes flyout {
0% {
opacity: 0;
transform: scaleX(0);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}