CSS mega menu close button on mobile

[tycoonster]

Hi guys,
I am using wordpress, elementor on my site and have this css code for mega menu.
Its working fine on desktop but I cant figure how to make a close button for mobile use.

.menu_content{
position: absolute;
top:47px;
opacity: 0;
pointer-events: none;
}

.menu_content:hover, .menu_content:focus, .menu_content:focus-within{
opacity: 1;
pointer-events: visible;
}

.nav_item{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 76px;
}

.nav_item:hover + .menu_content, .nav_item:focus-within + .menu_content {
opacity: 1;
pointer-events: visible;
}
.nav_item:hover + .menu_content::after , .nav_item:focus-within + .menu_content::after, .menu_content:hover::after, .menu_content:focus-within::after {
content:'';
position: fixed;
width: 100%;
height: 100vh;
left:0;
pointer-events: none;
overflow: hidden;
background-color: #0000
}

.menu_content .elementor-container{
padding: 3%;
}

 

[BGB]

Please study this css and you will know how to design your website for any online plateform Responsive Web Design Introduction. After that if you get any hardel in your quest than reply here 🙂