First you need to add a function to your function.php file. Do this in your child theme folder. See creating a child theme.

First create the mobile menu in the Appearance -> Menus admin screen. Call it mobile-menu.

Now, in your theme’s functions.php, you need to write a function to register th names of your mobile menu. This is the name you gave them in the Appearance -> Menus admin screen above.  Here I am register one called ‘mobile-menu’

function register_my_menu() {
register_nav_menu(‘mobile-menu’,__( ‘menu-mobile’ ));
}
add_action(‘init’, ‘register_my_menu’ );

The next stage is to place the line below where your main menu is, in WordPress twenty fourteen it’s called primary. (There can be a secondary too). Look for the line below in the header.php file. (use a copy in the child folder)

<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>

add below it this line:
<?php wp_nav_menu( array( ‘theme_location’ => ‘mobile-menu’, ‘menu_class’ => ‘mobile_menu’ ) ); ?>

Next add the following to your child theme’s style.css file.  Basically it works by checking the resolution of the screen before which of the WordPress menus are dispayed

/* hide mobile menu */
.mobile_menu {
display:none;
}
@media screen and (max-device-width : 480px) {
.primary-navigation{
display:none;
}
.mobile_menu {
display:block;
}
}
/* Tablets and lower */
@media screen and (max-width: 1008px) {
.primary-navigation {
display:none;
}
.tab_menu {
display:block;
}
}

Create your ‘movile-menu’ menu using the Appearance-menu  option

Done – now test it

Check out the WordPress Codex information. Really useful for a newbie WordPress website developer