Jquery click menu working but completely transparent in Safari and most mobile browsers

Question

I have a link that, once clicked, reveals a menu. It is designed for smaller browser windows at a convenient breakpoint in the website design ( 965px ). Here is how it is behaving in different browsers:

Firefox (desktop), Opera (desktop), Puffin (mobile):

• Works perfectly.

Safari (desktop & mobile), Opera Mini, Google Chrome (mobile), Dolphin (mobile), Mercury (mobile), Coast by Opera (mobile):

• Doesn't show at all - however, if I click (or tap) the menu and then click where the dropdown should be, it triggers the links - so the menu is there, just completely transparent!

Google Chrome (desktop):

• Exact same transparent-but-still-functioning behavior as above but only when it is sitting over the image gallery I have at the top of the page; when I scroll past the gallery it appears and functions normally.

I'm a little perplexed as to why this would be. So far seems to be a CSS issue but I can't seem to nail it down; I'm adding notes to go along with the code below. I also have tried enabling/disabling the entire image gallery but again, it had no effect.

Here is a link to the site thusfar: http://www.evinulrichpohl.com/trenholmetest

And here's some snippets of the code relevant to the click menu:

HTML:

<div id="hammenushowbio" class="viewmenu">MENU</div>
        <div id="hammenu">
            <div class="hammenulinks">
                <ul>
                    <li data-slide="2" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">FIRM PROFILE</div></li>
                    <li data-slide="3" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">CLIENT SERVICES</div></li>
                    <li data-slide="4" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">OUR TEAM</div></li>
                    <li data-slide="5" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">CONTACT US</div></li>
                </ul>
            </div>
        </div>
</div>

CSS:

.viewmenu{
display:none;
float:right;
font-size:13px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#FFFFFF;
letter-spacing:1.5px;
cursor:pointer;
}
#hammenu{
position:fixed;
z-index:99; //enabling/disabling has no effect
width:100%; //enabling/disabling has no effect
margin-top:55px;
left:0; //enabling/disabling has no effect
}
//enabling/disabling from here downward has no effect
#hammenu:after{
content:"";
position:absolute;
display:block;
width:0;
height:0;
}
.hammenulinks{
display:inline-block;
float:left;
width:100%;
font-size:16px;
}
.hamtext{
margin-left:30px;
letter-spacing:1.5px;
}
.hammenulinks li{
background-color:#FFFFFF;
color:#1E2129;
display:block;
text-align:left;
padding-top:20px;
padding-bottom:20px;
border-bottom:1px #eeeeee solid;
}
.hammenulinks li:hover{
cursor:pointer;
background-color:#eeeeee;
}

Jquery (It doesn't appear to be a JS issue as I have utilized the exact same click functions more than a dozen other times on the site and they are all working correctly in all desktop and mobile browsers. However, my knowledge of JS is quite limited at this point so I can't rule it out for sure):

$(document).ready(function () {
var $slides = $('#hammenu').hide();
$('div#hammenushowbio').show().click(function () {
    var $slider = $(this).next("#hammenu");
    if (!$slider.length){
        $slider = $(this).closest("#hammenu");
    }
    $slides.not($slider).stop(true, true).slideUp();
    $slider.stop(true, true).slideToggle(0);
});
});

Mediaq (enabling or disabling has no effect):

@media (max-width : 965px){
.viewmenu {
    display:inline-block;
}
#hammenu {
    display:inline-block;
}
}

@media (min-width : 966px){
#hammenu {
    display:none !important;
}
.viewmenu {
    display:none !important;
}
}

Answer 1

I'm pretty sure that the "click" event is a "mouse" left-click event only. Tablets and smartphones and other touch-based devices won't trigger it. They will, however, trigger javascript that's coded in the href of an anchor tag. Ex:

<a href="javascript:ShowMenu();"><div class="viewmenu">MENU</div></a>

A much more elegant alternative IMO would be to use the jQuery Mobile plugin to support both desktop AND mobile devices. Get rid of the anchor tag around the MENU div and bind the TAP event directly to the DIV itself:

$('div.viewmenu').on('tap', function() {
    var $slider = $(this).next("#hammenu");
    if (!$slider.length){
        $slider = $(this).closest("#hammenu");
    }
    $slides.not($slider).stop(true, true).slideUp();
    $slider.stop(true, true).slideToggle(0);
});

Just a quick word of caution though. Mobile devices tend to have far more limited amount of resources than desktops (CPU, Memory, etc), so when using the jQuery mobile plugin, just download the components you need to keep the javascript file as small as possible. They provide a great resource for this in the downloads section. Take advantage of it. :)

Answer 2

Figured it out! It's now working across the board.

Thanks to fastsol over at codingforums.com

I had overflow:hidden; as a property of my .navigation div... yeah...

A left-over bit of code from an earlier experiment for the drop-down menu.

Serves me right for not tidying up properly!