Custom Wordpress menu which has two menues one for mobile and one for dektop. Instructions: - Insert functions.php code in functions.php :) - Insert header.php in the header of your wordpress page (where you want your menus) - Toggle menus using CSS / create media queries

function.php

<?php
// creating a drop down list for mobile devices
class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu {

	/* ----------
	Checking wheter an item has childen, needed a little workaround, the solution can be found using this link
	http://wordpress.org/support/topic/how-do-i-know-if-a-menu-item-has-children-or-is-a-leaf#post-3139633

	Basicall it adds
	$item->hasChildren
	---------- */
	
	function display_element ($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
		
		// check, whether there are children for the given ID and append it to the element with a (new) ID
		$element->hasChildren = isset($children_elements[$element->ID]) && !empty($children_elements[$element->ID]);

		return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
	
	}

	function start_lvl($depth) {

		$indent = str_repeat($depth);

	}

	function end_lvl($depth) {

		$indent = str_repeat($depth);

	}

	function start_el(&$output, $item, $depth, $args) {
		
		static $id;

		if ($item->hasChildren === true) {        

			switch ($item->url) {
				case '#':
				case 'http://':
					$output .= '<optgroup label="' . $item->title . '">';
					break;
				default:
					$output .= '<option value="' . $item->url . '">' . $item->title;
					$id = $item->ID; 
					break;
			}

		} elseif ($id == $item->menu_item_parent) {

			$output .= '<option value="' . $item->url . '"> - ' . $item->title;

		} else {

			$output .= '<option value="' . $item->url . '">' . $item->title;

		}
	}

	function end_el(&$output, $item, $depth){

		if($item->hasChildren === true) {
		
			$output .= "</optgroup>";
		
		} else {
		
			$output .= "</option>";
		
		}
	}
}


// Wrapping sub menu ul inside a div
class Walker_Nav_Child_Wrap extends Walker_Nav_Menu {
	
	function start_lvl(&$output, $depth) {

		$indent = str_repeat("\t", $depth);
		$output .= "\n$indent<div class=\"menu-sub\"><ul class=\"sub-menu\">\n";

	}

	function end_lvl(&$output, $depth) {

		$indent = str_repeat("\t", $depth);
		$output .= "$indent</ul></div>\n";

	}
}

?>

header.php

  <form name="mobileNav">
	<?php wp_nav_menu( array( 
		'theme_location'  => 'primary',
		'echo'            => true,
		'fallback_cb'     => 'wp_page_menu',
		'items_wrap' 	  => '<select onchange="if (this.value) window.location.href=this.value">
							      <option value="#"> - Menu - </option>
							      %3$s
							  </select>',		
		'depth'           => 0,
		'walker'          => new Walker_Nav_Menu_Dropdown()
	)); ?>
</form>

<?php wp_nav_menu( array( 
	'theme_location'  => 'primary',
	'container'       => false,
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'items_wrap'      => '<ul class="desktopNav">%3$s</ul>',
	'depth'           => 0,
	'walker'          => new Walker_Nav_Child_Wrap()
 ) ); ?>