Mobile Menu not Clickable- Please Help

[birdmansdesigns5]

Hi, hopefully someone here can help me with this issue. I have finally decided to get my website completely mobile friendly and I figured out how to get the menu to look right when in a small screen; now this coding works great when I try the responsive test in firefox browser for all of the sizes available there but when I try it out on my iPod I am unable to click on the area that makes the menu pop out. Here is the link to the page; it’s a test page- http://mikesextonstudio.com/test.html .

Here is the css code

/*
/********************* CSS For Navigation Menu *********************/
/* CSS Popout Menu */


/* nav */
.nav {
    position: relative;
    margin: 20px 0;
}
.nav ul {
    margin: 0;
    padding: 0;
font-weight: bold;
width: 90%;

}
.nav li {
    margin: 0 5px 10px 0;
    padding: 0;
    list-style: none;
font-size: 12px;
    display: inline-block;
border-style : solid;
border-width : 3px; 
border-color : #f5df21;
background-image: url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/MenuRegBG_zps01a193dd.jpg);
}
.nav a {
    padding: .5em;
    text-decoration: none;
    color: #999;
    
}
.nav a:hover {
    border: solid 3px #42b1f4;
font-size: 12px;
font-weight: bold;
color : #c00000; 
background-image : url(http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/2015MenuHover_zpszqmawcx7.jpg);
}
.nav .current a {
    background: #999;
    color: #fff;
    border-radius: 5px;
}

and here's the media query for it  to work on mobile: 

@media screen and (max-width: 420px) {
    .nav {
        position: relative;
        min-height: 40px;
    }    
    .nav ul {
        width; 30%;
                
        padding:  5px;
        position: relative;
        top: 0;
        left: 0;
        border: solid 2px #4a94f4;
        background: url("http://i790.photobucket.com/albums/yy181/BirdmansArt/BirdmansWebsite/Mobile/MenuButton_zps2pjftb0e.jpg") no repeat ;
        border-radius: 20px;
        box-shadow: 2px 2px 2px 2px rgb(0,0,0);
    }
    .nav li {
        display: none; /* hide all <li> items */
        margin: 0;
    }
    .nav .current {
        display: block; /* show only current <li> item */
    }
    .nav a {
        display: block;
        padding: 0;
        text-align: left;
    }
    .nav .current a {
        background: none;
        color: #666;
    }

    /* on nav hover */
    .nav ul:hover{
        background-image: none;
    }
    .nav ul:hover li  {
        display: block;
        margin: 0 0 5px;
    }
    .nav ul:hover .current {
        background: url(images/icon-check.png) no-repeat 10px 7px;
    }

    
    }
    
}

[PaulOB]

Mobiles don’t do hover although some devices will take a first touch as a sort of hover but usually only for elements like anchors (and then usually only when cursor:pointer is set).

There is a hack to make the menu open on some devices (iphone) by adding an empty onclick attribute into the hover trigger. In your case this would be here:

<nav class="nav" onclick="">

That should allow the menu to open but of course to close it the user would have to click outside the menu.

You would be beter off in developing the hamburger approach and using js to toggle the menu.

Here is an example.

Note you have a typo here:

 .nav ul {
        width; 30%

That should be a colon in the middle but I doubt you want 30% anyway.

You have an unhealthy mix of old and new in your page and you would be wise to spend some time on updating the code to more modern standards especially when looking to support newer devices.

[birdmansdesigns5]

thank you Paul; I’ll give that a shot tomorrow first thing. Just for curiosity sake, could you give me an example of what part of my coding is old and should be updated?

[Mittineague]

The page is XHTML Transitional

center bold font = old
nav address = new

[birdmansdesigns5]

Thanks