implement resposive no collapse responsive menu

Question

I want to implement this menu

The problem is the shape and the hover and how to make it responsive you know, I want to keep this menu style in mobile and won't to collapse in mobile all text will disappear and only icon will stay.

The thing that I tried on is here:

<section class="slide menu clearfix">
    <div>
        <h1>Qweb|کیو وب</h1>
        <nav class="clearfix">
            <ul class="clearfix">
                <li class="Mhome"><a href="#">صفحه اصلی</a></li>
                <li class="Mservice"><a href="#one">خدمات</a></li>
                <li class="Mporfolio"><a href="#two">نمونه کارها</a></li>
                <li class="Mcash"><a href="#three">تعرفه ها</a></li>
                <li class="Mabout"><a href="#four">درباره ما</a></li>
                <li class="Mcontact"><a href="#five">ارتباط با ما</a></li>
            </ul>
        </nav>
    </div>
</section>

and for white background I used:

body {
    background-color: gray;
}
.logo {
    background-color: white;
    border-radius: 0px 0px 30% 30%;
}

and I got this: