Full width mobile and tablet menu.

Hello, i am trying to create a full width menu for mobile and tablet. Like this website: https://mobelmedia.com/selevenedu/

and this is my website: https://mobelmedia.com/umnasserfinland/about-us/

i have achieved almost similar result by using css in Theme Customisation > Additional css. However, i want two more things. Firstly, if i scroll the menu should stay on the screen like the sample site. Secondly, the menu when open should cover the header section from top as well and the cross sign should be placed inside the menu.

Following is the CSS code:

/*changing the Divi hamburger menu to X*/
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}
/*rotating the Divi Menu icon*/

.mobile_menu_bar:before {
transition: all .4s ease;
transform: rotate(0deg);
display: block;
}


/*rotate the Divi Menu icon on click*/

.mobile_nav.opened .mobile_menu_bar::before {
transition: all .4s ease;
transform: rotate(90deg);
display: block;
}

/* Remove the top line in the mobile menu*/
.et_mobile_menu {
border-top:0;
}

/*making the Divi Menu full width*/
.et_pb_menu .et_mobile_menu{
min-width: 105vw;
padding-top: 30%!important;
margin-left: -45vw;
padding-bottom: 100vh!important;
}

/*removing the line from the menu items and adding line height*/

.et_mobile_menu li a {
padding:10px 10px!important;
border-bottom: none!important;
}

currently this code is not inserted so you will see a normal mobile menu.

 

should i put this css code inside the custom css tab of menu module?

 

Great. I have combined your code with mine and it is working perfectly but the header section is sticky as you can see in the screenshot. I don’t want the header to be sticky. Secondly, i have two menu one for English pages ( Global header ) and the second is for Arabic pages ( custom header ) . You can see in screenshot that the custom header for arabic pages is not displaying correctly. Kindly give solutions for both problems, sticky header and custom header for arabic pages. Thank you, waiting for your response.
Here are the links for both menus: https://mobelmedia.com/umnasserfinland/about-us/#

https://mobelmedia.com/umnasserfinland/ar-admissions/

 

Okay, but kindly suggest the solution for arabic pages menu.

 

This is the current situation of custom header for arabic pages. Like pages header has RTL formation as well and the margin right is 50px for mobile to align the hamburger in top left corner.