wp_nav_menu<\/em> and add the following immediately underneath:<\/p>\n\r\n<?php wp_nav_menu( array( 'theme_location' => 'primary mobile', 'menu_class' => 'nav-menu' ) ); ?>;\r\n\r\n<\/pre>\nThis call generates the HTML for our new menu location.<\/p>\n
Step 4 \u2013 Set the CSS classes for the menus<\/h2>\n
To show the appropriate menu, we are going to make use of @media<\/em> queries to toggle the displaying of the primary and mobile menus.<\/p>\nBy default, WordPress wraps menus in a div tag<\/em> with a class name derived from the menu name. Whilst we could simply use these class names in our stylesheet, that would mean having to update the stylesheet every time a different menu is assigned to a location. To maximize flexibility we will set our own more generic class name for the menu container. We can do this very simply by using the wp_nav_menu_args<\/em> filter.<\/p>\nGo back to your functions.php<\/em> file and add the following:<\/p>\n\r\n\r\nfunction set_container_class ($args) {\r\n$args['container_class'] = str_replace(' ','-',$args['theme_location']).'-nav'; return $args;\r\n}\r\nadd_filter ('wp_nav_menu_args', 'set_container_class')\r\n\r\n<\/pre>\nAll we are doing here is setting the container_class<\/em> to the theme location (replacing spaces with hyphens) and adding \u2018-nav\u2019. We have registered the locations primary<\/em> and primary mobile<\/em> so WordPress will now output our 2 menus wrapped in <div class=”primary-nav”><\/em> and <div class=”primary-mobile-nav”><\/em> elements respectively.<\/p>\nStep 5 \u2013 Amend the Stylesheet to Control Menu Display<\/h2>\n
Our final step is to add the styling to only show the appropriate menu. Open styles.css<\/em> and add the following:<\/p>\n\r\n.primary-mobile-nav {\r\ndisplay: none;\r\n}\r\n@media (max-width: 643px){\r\n.primary-nav {\r\ndisplay: none;\r\n}\r\n.primary-mobile-nav {\r\ndisplay: block;\r\n}\r\n}\r\n\r\n<\/pre>\nGenerally, we don\u2019t want the mobile menu to show so we\u2019ll hide it by default by setting its display<\/em> attribute to none<\/em>.<\/p>\nTo ensure that we only show the mobile menu (and hide the primary menu) when we get below a certain screen-size, we place the display statements within an appropriate @media<\/em> query. For the TwentyThirteen theme it\u2019s at 643px but you\u2019ll need to check your theme\u2019s stylesheet to see which @media<\/em> query activates the small menu.<\/p>\nOf course, you can add any number of menus and target multiple screen-sizes just by adding more menus in steps two and three and updating the stylesheet with the appropriate @media<\/em> queries.<\/p>\nJust five quick and easy steps to add awesome mobile menus to your responsive WordPress theme and provide your non-desktop users with a far better and more tailored experience.<\/p>\n
What other steps do you take to improve the mobile experience for your visitors? Do you even take any steps? Tell us in the comments below.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"Updating a responsive theme to allow mobile-specific menus is quick and easy and will provide significant benefits for both you and your mobile visitors.<\/p>\n","protected":false},"author":262394,"featured_media":121874,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[2395],"tutorials_categories":[],"class_list":["post-121692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-mobile"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/121692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/262394"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=121692"}],"version-history":[{"count":5,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/121692\/revisions"}],"predecessor-version":[{"id":195211,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/121692\/revisions\/195211"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/121874"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=121692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=121692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=121692"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=121692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Don't](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/09\/shipinabottle.jpg\")
<\/a>