Mobile menu width

Previously, I was using a mobile menu widget that I downloaded from the online catalog however, it was limited in some areas that I wanted to customize it. So, I created my own after researching some suggestions on this forum ... this enables me to make the menu boxes wider with outlines, possibly fly in from the right later, I also wanted to use a font that I have throughout the website, etc. Only thing is, now when viewing from my phone, the menu boxes don't go all the way to the right. I don't want it to be full width ... only 75% of the page but I don't want to see any of the page underneath on the right side of the menu either (when viewing on my phone vertically ... I realize you will when viewing horizontially). Is there any way of fixing this? I thought I had found a solution for my client wanting the mobile menu more customizable but now ... I don't think this will suit him as is.

Temp file here ...
http://www.casteendesign.com/cathy/

As always, thank you so much for your help.

Also, if I'm further down on the page and click on the mobile menu I created, then the popup menu does not show up ... it only shows up if I'm at the top of the page. Any suggestions.

The pop-up layer is fixed. If it could be sticky, that would be great. But at present it is not.

Is there more than one mobile menu to choose from then? From the online catalog I mean? One that allows for more editing? I need it to be wider tabs/boxes that sticks to the side and flys out.