Mobile Menu CSS Help

I need some help with mobile navigation styling.
I've attached an image below of how it looks like right now  (on the left) vs how I want it to be (on the right).
Basically I can't find a way how to centralize everything on the screen and swap arrows.
Also Is there any way for the drop down element to open up and actually drop down on the same page? Without opening a new menu slide. 

Please help.

A

@ANDREY_DANILOV Please add this CSS code to your website :
 

.Mobile-overlay-nav-item.Mobile-overlay-nav-item--folder {
    text-align: center;
}

.Mobile-overlay-menu {
    left: 30px;
}
.Mobile-overlay-close {
    z-index: 999 !important;
}

Let me know if it works!

Perfect, thank you Shadmon! 

One last thing how do I change the default double arrows to something from the squrespace icon font or from font awesome?

Thank you.

A