Time for action—coding mobile menus into the theme

Our two new menus will be displayed at different places, one in the header and one at the bottom of the page. To do this, we will need to add some new code to two theme files—header.php and footer.php. Perform the following steps for coding mobile menus into the theme:

1. 1. First, we will open header.php and look for the code containing the existing menu as follows:

   <nav class="access">
   <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
   </nav><!-- .access -->
   

2. 2. As our new menu needs to be styled differently, we'll add the menu and assign a unique class to it, which we can use in our CSS.

   The code we will add to display the mobile-top menu is as follows:

   <?php wp_nav_menu( array( 'menu' => 'mobile-top', 'container_class' => 'menu-header', menu-class => 'mobile-top-menu' ) ); ?>
   

3. 3. But, we also need to ensure this menu only displays on mobile devices,...