Need help with browser detection and JS, opacity/transparency

I would like to make my sites menu show only on mobile devices such as ipads and smart phones. Right now, when you go to boat smith fl dot com, the site only shows the menu on mouse hover, this was created by the original builder of the site so you can see the full page photo with no distractions. At this point I would like to see the menu with no fade in/no transparency on mobile devices, but keep it the same on normal computer monitors. That way a visitor doesn’t have to touch the screen to find out where the menu is.

I had a few friends look at the code since I am a newbie and the best they could come up with was to add some code to the template-homepage-fn.php file.
They suggested I insert:
‘if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
$j(‘#menu_wrapper’).css(‘display’, ‘block’);
}
elseif(BrowserDetect.browser != ‘Explorer’)
{
$j(‘body’).hover(
function(){ //mouse over
$j(‘#menu_wrapper’).stop().fadeTo(“slow”, 1);
},
function(){ //mouse out
$j(‘#menu_wrapper’).stop().fadeTo(“slow”, 0);
}
);
}
else
{
$j(‘#menu_wrapper’).css(‘display’, ‘block’);
‘

I tried a few times adding the code but I think I am missing something. I would bug my friends some more, but I think they are getting annoyed. So I turn to you all for your help and guidance. Thanks, KP