challenges with Primary Navigation menu

Hi,
I am really enjoying the beauty of the Esotera theme (and all the Cryout themes!) However, I am a little bit perplexed and unsure how to proceed with a larger (e.g. six items or more) menu for the Primary Navigation.

As the menu gets larger, we run into a case where it does not fit in one row across the screen, especially on smaller desktop screens. This is not an issue on smaller screens because the menu displays as an icon.

If the menu needs to wrap to a second line, things go haywire quickly. First, the entire menu goes to a second “line” below the site icon; then when the menu does actually wrap it ends up underneath the header or slider text and becomes illegible. The issue is partially due to the line height being set to the full height of the header, the same height as the site icon, even though there is plenty of vertical space next to the icon for two or three lines of menu items.

Has anyone else run into this? We are debating whether to use fewer menu items as a workaround, or finding some CSS to make things look smoother. I would love some suggestions for the CSS if anyone knows a good way to make the menu wrap more gracefully.

Thanks!

The page I need help with: [log in to see the link]