iPhone menu not displaying properly

(This is a similar problem that was discussed in another thread but the proposed solution didn’t work for me.)

My site:

http://transitionsworkshops.com/wp/

The Nav Menu Bars aren’t appearing in a good location while in portrait mode on an iPhone (or a narrow browser window). The following code was proposed as a solution:

@media only screen and (max-width: 768px) {
#et_mobile_nav_menu {
margin-top: -40px;
}
}

The result improved the menu location in portrait mode but it broke the location in landscape mode. But even in portrait mode the menu wasn’t in the preferred location. I’d like it to stay in the top right corner of the window but it is superimposed on top of the title text. (I also have a logo on the page but I have tested with and without the logo and the results are the same.)

If I shorten the title text the menu looks great but I don’t think I can convince my client that changing the name of their organization is a good idea.

I could probably live with the solution above if it didn’t break landscape mode.

Is there a way to tweak the css so that the Nav Menu bar always floats in the top right corner of the window and not be affected by the title text?