menu behavior is not as expected

I am trying to develop one of those nav menus that has one on top of the other like so:

enter image description here

I am not sure if the issue is with the way I coded my header.php:

<!-- HEADER ========================================================================================== -->
    <header class="site-header" role="banner">
        <!-- NAVBAR ====================================================================================== -->
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div><!-- navbar-header -->

                    <!-- If the menu (WP Admin area) is not set, then the "menu_class" is applied to "container". In other words, it overwrites the "container-class". -->
                    <?php
                        wp_nav_menu(array(

                            'menu'      => 'topnav'
                        ));
                    ?>

                </div><!-- container -->
            </div><!-- navbar -->
        <div class="navbar-wrapper">
            <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <a class="navbar-brand" href="/"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/Logo.png" alt="UpAbility"></a>
                    </div><!-- navbar-header -->

                    <!-- If the menu (WP Admin area) is not set, then the "menu_class" is applied to "container". In other words, it overwrites the "container-class". -->
                    <?php
                        wp_nav_menu(array(

                            'theme_location'    => 'primary',
                            'container'         => 'nav',
                            'container_class'   => 'navbar-collapse collapse',
                            'menu_class'        => 'nav navbar-nav navbar-right'
                        ));
                    ?>

                </div><!-- container -->
            </div><!-- navbar -->

Or if the issue is with my functions.php:

<?php
/**
 * UpAbility functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package UpAbility
 */

if ( ! function_exists( 'upability_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 */
function upability_setup() {
    /*
     * Make theme available for translation.
     * Translations can be filed in the /languages/ directory.
     * If you're building a theme based on UpAbility, use a find and replace
     * to change 'upability' to the name of your theme in all the template files.
     */
    load_theme_textdomain( 'upability', get_template_directory() . '/languages' );

    // Add default posts and comments RSS feed links to head.
    add_theme_support( 'automatic-feed-links' );

    /*
     * Let WordPress manage the document title.
     * By adding theme support, we declare that this theme does not use a
     * hard-coded <title> tag in the document head, and expect WordPress to
     * provide it for us.
     */
    add_theme_support( 'title-tag' );

    /*
     * Enable support for Post Thumbnails on posts and pages.
     *
     * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
     */
    add_theme_support( 'post-thumbnails' );

    // This theme uses wp_nav_menu() in one location.
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary', 'upability' ),
    ) );

    /*
     * Switch default core markup for search form, comment form, and comments
     * to output valid HTML5.
     */
    add_theme_support( 'html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
    ) );

    // Set up the WordPress core custom background feature.
    add_theme_support( 'custom-background', apply_filters( 'upability_custom_background_args', array(
        'default-color' => 'ffffff',
        'default-image' => '',
    ) ) );

    // Add theme support for selective refresh for widgets.
    add_theme_support( 'customize-selective-refresh-widgets' );
}
endif;
add_action( 'after_setup_theme', 'upability_setup' );

function upability_register_custom_menu() {
    register_nav_menu('topnav', __('Top Nav'));
}
add_action('init', 'upability_register_custom_menu');

It’s not looking right though:

enter image description here

It’s hard to ask this question when there does not seem to be a name for my problem. For example, if I had an issue with a sticky menu then I would just say that. But as common as it is to have the type of nav menu where it seems to be one on top of the other, the documentation on how to develop it in WordPress is sparse.

So there are two issues here:
1. I want the bottom menu to be default and not move and the top one with BLOG and LOGIN to be inverse and to disappear up when the user starts to scroll.

  1. When I go to wp-admin and create the menu for one nav bar, it creates the menu for both nav bars.

My apologies if this is not clearer, A. it is not clear to me, B. I am exhausted quite frankly, have been working on this all day and night.

enter image description here

enter image description here

Solutions Collecting From Web of "menu behavior is not as expected"

First thing i would do is register 2 menus,

<?php function register_my_menus() {register_nav_menus(array('primary' => __( 'Primary Menu' ),'topnav' => __( 'Top Nav Menu' ) ) ); } add_action( 'init', 'register_my_menus' ); ?>

second in wordpress menu panel i would create two menus and assign each to a display location Third i would display the menus using

<!-- HEADER ========================================================================================== -->
<header class="site-header" role="banner">
    <!-- NAVBAR ====================================================================================== -->
    <div class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div><!-- navbar-header -->

                <!-- If the menu (WP Admin area) is not set, then the "menu_class" is applied to "container". In other words, it overwrites the "container-class". -->
                <?php wp_nav_menu( array( 'theme_location' => 'topnav' ) ); ?>

            </div><!-- container -->
        </div><!-- navbar -->
    <div class="navbar-wrapper">
        <div class="navbar navbar-inverse" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <a class="navbar-brand" href="/"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/Logo.png" alt="UpAbility"></a>
                </div><!-- navbar-header -->

                <!-- If the menu (WP Admin area) is not set, then the "menu_class" is applied to "container". In other words, it overwrites the "container-class". -->
                <?php
                    wp_nav_menu(array(

                        'theme_location'    => 'primary',
                        'container'         => 'nav',
                        'container_class'   => 'navbar-collapse collapse',
                        'menu_class'        => 'nav navbar-nav navbar-right'
                    ));
                ?>

            </div><!-- container -->
        </div><!-- navbar -->
        </div><!-- navbar-wrapper --></header>