Display menu on mobile device?

Hi Michael – I had given up on using this theme because of this error – but since you and others are having the same problem, it’s worthwhile to have a fix. Here’s my workaround.#

1. Install a plugin that will allow you to add your own custom css. (I used ‘Simple Custom CSS’, which I find excellent.)
2. Copy and paste the following code to the custom css file.

.nav-area {
   border-bottom: 0px;  /* make this border invisible */
   box-shadow: 0px;  /* make this shadow invisible */
   margin-top: 0px;
   margin-bottom: 0px;
   padding-top: 20px;   /* add some padding above the navicon */
   padding-bottom: 20px;    /* add some padding below the navicon */
}

This does two simple things.

* First, it provides more space above and below the mobile navigation menu on the right.
* Then it hides the horizontal line so the positioning error in relation to the logo on the left is not visible.

Ultimately, the navigation then looks great on my iPhone and iPad (and acceptable on a laptop). I had a quick look at your site, and it should work for you too!

# The problem is not just with the ‘navicon’ (i.e. the mobile menu which displays as the three horizontal lines) on mobile devices. Two related problems are (a) that the logo on the left is squeezed in too close to the top of the page, and (b) the horizontal line at the top of the page is too close to the logo and to the navicon.

Basically, the whole navigation area looks so terrible on a mobile device that the Heavenly theme is effectively unusable without a fix. This is a really poor implementation of mobile navigation. It’s a pity that the developers haven’t yet fixed it properly themselves.