WordPress | Mobile Menu using Mobile_Detect

mobile-menu.php

<!-- stylesheet content -->
<style type="text/css">
div#access {position:fixed; text-align:center; background-color:rgba(0, 0, 0, 0.9); height:100%; z-index:10; width:100%; color:#FFF; top:0; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease; opacity:1}
div#access ul {font-size:3em; list-style:none; margin:8em 0 0 0; padding:0}
div#access ul li {margin:1em 0}
div#access ul li a {display:inline-block}
div#access ul li a {color:#FFF; text-decoration:none; display:block; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease}
div#access a:hover {color:blue}
div#access ul li.current-menu-item a {cursor:default; border-bottom:2px solid #FFF}
div#access.right {right: -100%}
div#access.show {right:0}
div#access a#showmenu {margin-right:100%; display:block; position:absolute; top:4.5em; width:48px; height:48px; background-position:center center; background-repeat:no-repeat; background-size:auto 48px}
div#access a#showmenu.open {background-image:url(../images/bg_menu-open.svg); right:2.5em}
div#access a#showmenu.close {background-image:url(../images/bg_menu-close.svg); left:34px}
</style>

<!-- header.php content -->
<?php
/**
 * Detect the client so the site can become responsive.
*/
require_once 'mobile-detect/Mobile_Detect.php';
global $detect;
$detect = new Mobile_Detect;
global $mobile;
$mobile = $detect->isMobile();
?>
<?php
/* if we are on a mobile device load the relevant stylesheet */
$templatedir = get_bloginfo('template_directory');
if ( $mobile ) {
    echo '<link rel="stylesheet" type="text/css" media="all" href="' . $templatedir . '/css/mobile.css" />' . PHP_EOL;
}
?>
<?php
echo '<div id="access" role="navigation"';
if ( $mobile ) {
    echo ' class="right"';
}
echo '>' . PHP_EOL;
if ( $mobile ) {
    echo '<a href="#" id="showmenu" class="open"></a>' . PHP_EOL;
}
$parameters = array(
	'theme_location' => 'primary',
	'echo' => false
);
$menu = wp_nav_menu( $parameters );
echo $menu . '</div>'; // display menu and close #access
?>

<!-- footer.php content -->
<?php if ( $mobile ) { 
// Loading the JS for the hamburger menu
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#showmenu").click(function(e){
		e.preventDefault();
		$("#access").toggleClass("show");
		$("#showmenu").fadeOut(550, function(){
			$("#showmenu").toggleClass("open close").fadeIn(550);             
		}); 
	});
</script>
<?php } ?>

WordPress Responsive Mobile Menu

This works in conjunction with Mobile Detect to create a responsive hamburger side menu for WordPress themes.

First download Mobile Detect and add it to the root of the theme directory.

You will need to create three additional files to add to your theme. The first is a separate mobile style-sheet called mobile.css which will live in the theme's style-sheet directory. The second and third are two 48px x 48px icons. One being open and one being close. I'd recommend using SVG files for this.

Add the above code to the relevant locations in your theme.

Please note that styles in your global style-sheet could conflict with your mobile styles. One way round this is to move the menu styles from the global file to another, additional, style-sheet and add an else statement to the stylesheet php code. I often use desktop.css.